/*
 * NestThem Design Tokens — Premium Redesign Phase 1 (Foundation)
 *
 * The single source of visual truth for the whole app shell. Before this
 * file, four unrelated visual languages coexisted across templates/*.html
 * (a light Tailwind "legacy" page, a navy "auth gradient" family, a flat
 * "app dark" family, and a purple "kids cosmic" family) with no shared
 * hex values, spacing, or type scale. This file adopts "app dark" as the
 * base — it was already the most-used (7/13 templates) and most
 * premium-feeling — and folds the others in as accents on top of it,
 * rather than four systems that never talk to each other.
 *
 * Typography follows services/book_design.py's existing lock (Baloo 2
 * display + Andika body, already the platform's identity for books, per
 * ART_BIBLE.md Part One §23) extended to the whole app shell.
 *
 * This file does not replace any page's existing <style> block yet —
 * Phase 1 only ships and wires up the tokens. Migrating each page's own
 * CSS onto these variables is Phase 3/4 work, page by page.
 */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Andika:wght@400;700&display=swap');

:root {
  /* ── Base surfaces (from "App Dark" — parent/teacher/admin/studio/create/analytics) ── */
  --bg:            #0f172a;
  --bg-elevated:   #111c34;
  --surface:       #1e293b;
  --surface-hover: #253347;
  --border:        #334155;
  --border-strong: #475569;

  /* ── Text ── */
  --ink:           #f1f5f9;
  --ink-muted:     #94a3b8;
  --ink-faint:     #64748b;

  /* ── Brand ── */
  --primary:       #6366f1;
  --primary-hover: #7c7ff5;
  --primary-ink:   #ffffff;
  --accent:        #a855f7;   /* the auth-gradient purple, now a supporting accent, not a rival theme */

  /* ── Semantic (consolidated — previously 3-4 different hexes each) ── */
  --success:       #10b981;
  --success-bg:    #064e3b;
  --error:         #ef4444;
  --error-bg:      #450a0a;
  --warning:       #f59e0b;
  --warning-bg:    #451a03;

  /* ── Kid-mode accent layer — additive on top of the same base tokens,
       not a separate theme. Reserved for kids.html/story.html surfaces. ── */
  --kid-gradient:  linear-gradient(160deg, #0f0c29 0%, #1a1040 55%, #3b1f66 100%);
  --kid-accent:    #d946ef;
  --kid-accent-2:  #f472b6;

  /* ── Typography ── */
  --font-display: "Baloo 2", "Segoe UI Rounded", "SF Rounded", ui-rounded, system-ui, sans-serif;
  --font-body:    Andika, "Segoe UI", system-ui, sans-serif;

  /* ── Spacing scale ── */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ── Radius scale — rounded, per the brief's "premium children's product" language ── */
  --radius-sm:  .5rem;
  --radius-md:  .875rem;
  --radius-lg:  1.25rem;
  --radius-xl:  1.75rem;
  --radius-full: 999px;

  /* ── Shadow scale ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);

  /* ── Tap targets — every interactive control must clear this, no exceptions ── */
  --tap-min: 44px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}