/* ============================================
   THEME — Color system, type tokens & dark mode
   ============================================ */

@layer theme {
  :root {
    /* ── Type families ──
       Geist (sans) for UI + display, Geist Mono for labels/eyebrows,
       EB Garamond (italic) as an editorial accent only. */
    --font-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
    --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;

    /* ── Radius scale (one consistent system) ── */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-pill: 999px;

    /* ── Neutrals — warm, refined, no pure black/white ── */
    --bg-primary:    #F7F5F1;
    --bg-secondary:  #EFEBE3;
    --bg-card:       #FCFBF8;
    --bg-card-hover: #F4F1EA;

    --text-primary:   #1F1D18;
    --text-secondary: #58544C;
    --text-muted:     #8B867C;
    --text-inverse:   #F7F5F1;

    /* ── Single global chrome accent (neutral ink) ──
       The chromatic identity is the phase journey; chrome stays neutral
       so it never competes with the per-section phase colours. */
    --brand:       #2B2820;
    --focus-ring:  #2B2820;

    /* Borders & Shadows */
    --border-subtle:  rgba(31, 29, 24, 0.10);
    --border-light:   rgba(31, 29, 24, 0.06);
    --shadow-xs:  0 1px 2px rgba(31, 29, 24, 0.05);
    --shadow-sm:  0 2px 10px rgba(31, 29, 24, 0.07);
    --shadow-md:  0 6px 24px rgba(31, 29, 24, 0.08);
    --shadow-lg:  0 14px 44px rgba(31, 29, 24, 0.11);
    --shadow-xl:  0 24px 64px rgba(31, 29, 24, 0.13);

    /* Nav */
    --nav-bg:     rgba(247, 245, 241, 0.82);
    --nav-border: rgba(31, 29, 24, 0.10);

    /* ── Phase 1: Clay Sunrise (ages 0–3) ── */
    --p1:       #B5631F;
    --p1-light: #EFD8BE;
    --p1-mid:   #D38A45;
    --p1-bg:    #F8F1E8;
    --p1-glow:  rgba(181, 99, 31, 0.16);

    /* ── Phase 2: Sage Growth (ages 3–7) ── */
    --p2:       #54743A;
    --p2-light: #D2E0C0;
    --p2-mid:   #6E9550;
    --p2-bg:    #F1F5EA;
    --p2-glow:  rgba(84, 116, 58, 0.16);

    /* ── Phase 3: Deep Teal (ages 7–12) ── */
    --p3:       #2A7572;
    --p3-light: #BFDFDC;
    --p3-mid:   #3E9794;
    --p3-bg:    #EBF4F3;
    --p3-glow:  rgba(42, 117, 114, 0.16);

    /* ── Phase 4: Denim Calm (ages 12–15) ── */
    --p4:       #385E94;
    --p4-light: #C6D6EB;
    --p4-mid:   #517AB5;
    --p4-bg:    #ECF1F8;
    --p4-glow:  rgba(56, 94, 148, 0.16);

    /* ── Phase 5: Muted Indigo (ages 15–18) ── */
    --p5:       #534D96;
    --p5-light: #D0CDE8;
    --p5-mid:   #726CB8;
    --p5-bg:    #F0EFF8;
    --p5-glow:  rgba(83, 77, 150, 0.16);

    /* Timing */
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --duration-theme: 350ms;
  }

  /* ── Dark Mode ── */
  [data-theme="dark"] {
    --bg-primary:    #131210;
    --bg-secondary:  #1B1A16;
    --bg-card:       #21201A;
    --bg-card-hover: #2A2823;

    --text-primary:   #ECE7DC;
    --text-secondary: #A8A298;
    --text-muted:     #74706A;
    --text-inverse:   #1F1D18;

    --brand:      #ECE7DC;
    --focus-ring: #C9B79A;

    --border-subtle:  rgba(236, 231, 220, 0.10);
    --border-light:   rgba(236, 231, 220, 0.05);
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.35);
    --shadow-sm:  0 2px 10px rgba(0,0,0,0.45);
    --shadow-md:  0 6px 24px rgba(0,0,0,0.45);
    --shadow-lg:  0 14px 44px rgba(0,0,0,0.55);
    --shadow-xl:  0 24px 64px rgba(0,0,0,0.65);

    --nav-bg:     rgba(19, 18, 16, 0.86);
    --nav-border: rgba(236, 231, 220, 0.10);

    --p1:       #E2A668;
    --p1-light: #4A3016;
    --p1-mid:   #D38A45;
    --p1-bg:    rgba(226, 166, 104, 0.08);
    --p1-glow:  rgba(226, 166, 104, 0.20);

    --p2:       #9CBD79;
    --p2-light: #29381B;
    --p2-mid:   #7FA15E;
    --p2-bg:    rgba(156, 189, 121, 0.08);
    --p2-glow:  rgba(156, 189, 121, 0.20);

    --p3:       #5DC1BD;
    --p3-light: #133230;
    --p3-mid:   #44A9A5;
    --p3-bg:    rgba(93, 193, 189, 0.08);
    --p3-glow:  rgba(93, 193, 189, 0.20);

    --p4:       #82A8DD;
    --p4-light: #1A2A45;
    --p4-mid:   #5C84C0;
    --p4-bg:    rgba(130, 168, 221, 0.08);
    --p4-glow:  rgba(130, 168, 221, 0.20);

    --p5:       #A6A0DD;
    --p5-light: #232052;
    --p5-mid:   #847CC8;
    --p5-bg:    rgba(166, 160, 221, 0.08);
    --p5-glow:  rgba(166, 160, 221, 0.20);
  }

  /* Phase-specific accent vars resolved per section */
  .age-section[data-phase="1"] { --accent: var(--p1); --accent-light: var(--p1-light); --accent-mid: var(--p1-mid); --accent-bg: var(--p1-bg); --accent-glow: var(--p1-glow); }
  .age-section[data-phase="2"] { --accent: var(--p2); --accent-light: var(--p2-light); --accent-mid: var(--p2-mid); --accent-bg: var(--p2-bg); --accent-glow: var(--p2-glow); }
  .age-section[data-phase="3"] { --accent: var(--p3); --accent-light: var(--p3-light); --accent-mid: var(--p3-mid); --accent-bg: var(--p3-bg); --accent-glow: var(--p3-glow); }
  .age-section[data-phase="4"] { --accent: var(--p4); --accent-light: var(--p4-light); --accent-mid: var(--p4-mid); --accent-bg: var(--p4-bg); --accent-glow: var(--p4-glow); }
  .age-section[data-phase="5"] { --accent: var(--p5); --accent-light: var(--p5-light); --accent-mid: var(--p5-mid); --accent-bg: var(--p5-bg); --accent-glow: var(--p5-glow); }
}