/* =============================================================================
 * Persona Lab — Design Tokens
 * -----------------------------------------------------------------------------
 * 5-theme system. Default theme is Midnight (dark). Switch by setting
 * `class="theme-midnight | theme-pearl | theme-sand |
 *   theme-nestle-dark-intelligence | theme-deep-summit"` on <body>.
 *
 * All UI colors must be expressed as var(--*) — never as raw hex/rgba in
 * components. If a value isn't here yet, add it here first, then use it.
 * =============================================================================
 */

/* === THEME 1 · MIDNIGHT (default dark) ===================================== */
:root,
.theme-midnight {
  /* Surfaces */
  --bg-base:               #0A0B12;
  --bg-elev-1:             #11131C;
  --bg-elev-2:             #181A26;
  --bg-elev-3:             #1F2231;

  /* Glass surfaces (translucent, sit on bg-base) */
  --glass-tint:            rgba(255, 255, 255, 0.04);
  --glass-tint-strong:     rgba(255, 255, 255, 0.06);
  --glass-border:          rgba(255, 255, 255, 0.08);
  --glass-border-strong:   rgba(255, 255, 255, 0.14);

  /* Text */
  --text-hi:               #F5F6FA;
  --text-mid:              #A8ABBE;
  --text-low:              #5A5E73;

  /* Accent (Nestlé brown brightened for dark surface) */
  --accent:                #B8A07A;
  --accent-strong:         #D4B98E;
  --accent-rgb:            184, 160, 122;
  --accent-glow:           rgba(184, 160, 122, 0.4);
  --accent-text:           #1A1308;   /* color of text rendered on accent fill */

  /* MENA action colors. Each has a paired *-rgb triplet for rgba() usage. */
  --act-strong:            #2D6A3F;   /* STRONGLY_PROGRESS */
  --act-strong-rgb:        45, 106, 63;
  --act-consider:          #2D5C8F;   /* CONSIDER */
  --act-consider-rgb:      45, 92, 143;
  --act-hold:              #C7892F;   /* HOLD_OR_REFINE */
  --act-hold-rgb:          199, 137, 47;
  --act-stop:              #B14B47;   /* DO_NOT_PROGRESS */
  --act-stop-rgb:          177, 75, 71;

  /* MENA lens accents (on three-lens cards & chart axes) */
  --lens-desire:           #F0A8C0;
  --lens-need:             #8FB8E6;
  --lens-white:            #C9B6F2;

  /* Shadow & glow recipes */
  --shadow-glow-sm:        0 0 20px rgba(184,160,122,0.15);
  --shadow-glow-md:        0 0 40px rgba(184,160,122,0.25),
                           inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-card:           0 8px 32px rgba(0,0,0,0.35),
                           inset 0 1px 0 rgba(255,255,255,0.04);
  --ring-focus:            0 0 0 1.5px var(--accent),
                           0 0 20px var(--accent-glow);

  /* Ambient backdrop blobs (landing/login/dashboard) */
  --amb-blob-1:            rgba(184,160,122,0.35);
  --amb-blob-2:            rgba(143,184,230,0.18);
  --grain-opacity:         0.03;
  --grain-blend:           overlay;

  /* Semantic surfaces */
  --surface-bar:           rgba(17, 19, 28, 0.65);    /* sidebar */
  --surface-bar-strong:    rgba(10, 11, 18, 0.75);    /* topbar (one step darker) */
  --surface-active:        rgba(255, 255, 255, 0.06); /* active nav-item bg */
  --track-bg:              rgba(255, 255, 255, 0.06); /* progress / scrollbar tracks */
  --thumb-overlay:         rgba(10,11,18,0.7);        /* gradient overlay on concept images */
  --score-badge-bg:        rgba(0,0,0,0.5);
  --score-badge-border:    rgba(255,255,255,0.15);

  /* Logo (Nestlé bird mark renders in this color) */
  --logo-color:            #D4B98E;
  --logo-on-accent:        #1A1308;
  --bubble-text:           rgba(0,0,0,0.65);

  /* 2×2 chart specific */
  --chart-compressed-fill:  rgba(255,255,255,0.025);
  --chart-quadrant-tint:    rgba(110,231,183,0.10);
  --chart-gridline:         rgba(255,255,255,0.08);
  --chart-plot-border:      rgba(255,255,255,0.16);
  --chart-divider:          rgba(255,255,255,0.20);
  --chart-segmented-bg:     rgba(255,255,255,0.05);
  --chart-segmented-active: rgba(255,255,255,0.10);
  --chart-bubble-text:      #F5F6FA;

  /* Motion */
  --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-fast:     cubic-bezier(0.4, 0, 0.6, 1);

  /* ===========================================================================
     Debate "stage" redesign — Layer A (global, no name collision).
     Surface overrides for the debate detail page live in debate.css inside
     .debate-stage-page (scoped so other pages stay midnight-dark).
     Source: docs/archive/docs/UI_debate_upgrade/debate_design_tokens.css
     =========================================================================== */

  /* Role palette — same hue across themes; cards cascade --role-color via [data-role] */
  --role-advocate:            #2d7a52;
  --role-advocate-soft:       #e8f1ea;
  --role-advocate-glow:       rgba(45, 122, 82, 0.35);
  --role-advocate-text:       #1a4a32;

  --role-challenger:          #b8442c;
  --role-challenger-soft:     #f6e7e1;
  --role-challenger-glow:     rgba(184, 68, 44, 0.35);
  --role-challenger-text:     #6e2818;

  --role-gatekeeper:          #a06b1e;
  --role-gatekeeper-soft:     #f5ead4;
  --role-gatekeeper-glow:     rgba(160, 107, 30, 0.35);
  --role-gatekeeper-text:     #5e3f12;

  --role-neutral:             #6b6358;
  --role-neutral-soft:        #ede9e2;
  --role-neutral-glow:        rgba(107, 99, 88, 0.25);

  /* Evidence drama — golden banner + breathing glow */
  --evidence-amber:           #c8861f;
  --evidence-amber-soft:      #faedd5;
  --evidence-glow:            rgba(200, 134, 31, 0.5);
  --evidence-glow-strong:     rgba(200, 134, 31, 0.75);

  /* Collision spark — cross-fire centre */
  --collision-spark:          #8b3a8c;
  --collision-glow:           rgba(139, 58, 140, 0.4);

  /* Movement type colour-coding (final position section) */
  --mover-color:              var(--evidence-amber);
  --anchor-color:             var(--role-neutral);
  --flipper-color:            var(--collision-spark);

  /* Typography */
  --font-display: "Fraunces", "GT Sectra Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-quote:   "Fraunces", Georgia, serif;
  /* --font-mono kept compatible with existing usage */

  /* Type ramp */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Layout containers */
  --container-max: 1200px;
  --reading-max:   720px;

  /* Easing + duration ramp (stage-specific motion curves) */
  --ease-natural:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-dramatic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant:   100ms;
  --dur-quick:     180ms;
  --dur-normal:    320ms;
  --dur-slow:      600ms;
  --dur-cinematic: 1200ms;
}

/* === THEME 2 · PEARL (white, Nestlé brand-aligned) ========================= */
.theme-pearl {
  --bg-base:               #FAF7F0;
  --bg-elev-1:             #FFFFFF;
  --bg-elev-2:             #FBF8F1;
  --bg-elev-3:             #F2EDE0;

  --glass-tint:            rgba(99, 81, 61, 0.04);
  --glass-tint-strong:     rgba(99, 81, 61, 0.07);
  --glass-border:          rgba(99, 81, 61, 0.12);
  --glass-border-strong:   rgba(99, 81, 61, 0.22);

  --text-hi:               #1A1308;
  --text-mid:              #5C5044;
  --text-low:              #918577;

  --accent:                #63513D;   /* Nestlé brand brown */
  --accent-strong:         #8B7558;
  --accent-rgb:            99, 81, 61;
  --accent-glow:           rgba(99, 81, 61, 0.22);
  --accent-text:           #FFFFFF;

  --act-strong:            #2D6A3F;
  --act-strong-rgb:        45, 106, 63;
  --act-consider:          #2D5C8F;
  --act-consider-rgb:      45, 92, 143;
  --act-hold:              #C7892F;
  --act-hold-rgb:          199, 137, 47;
  --act-stop:              #B14B47;
  --act-stop-rgb:          177, 75, 71;

  --lens-desire:           #BE3A6B;
  --lens-need:             #1E40AF;
  --lens-white:            #6D28D9;

  --shadow-glow-sm:        0 4px 20px rgba(99,81,61,0.10);
  --shadow-glow-md:        0 8px 32px rgba(99,81,61,0.14);
  --shadow-card:           0 4px 16px rgba(99,81,61,0.10),
                           0 1px 2px rgba(99,81,61,0.06);
  --ring-focus:            0 0 0 1.5px var(--accent),
                           0 0 16px rgba(99,81,61,0.25);

  --amb-blob-1:            rgba(99,81,61,0.10);
  --amb-blob-2:            rgba(143,130,110,0.07);
  --grain-opacity:         0.02;
  --grain-blend:           multiply;

  --surface-bar:           rgba(255, 255, 255, 0.70);
  --surface-bar-strong:    rgba(255, 255, 255, 0.82);
  --surface-active:        rgba(99, 81, 61, 0.10);
  --track-bg:              rgba(99, 81, 61, 0.12);
  --thumb-overlay:         rgba(255,250,240,0.6);
  --score-badge-bg:        rgba(255,255,255,0.85);
  --score-badge-border:    rgba(99,81,61,0.18);

  --logo-color:            #63513D;
  --logo-on-accent:        #FFFFFF;
  --bubble-text:           rgba(255,255,255,0.95);

  --chart-compressed-fill:  rgba(99,81,61,0.06);
  --chart-quadrant-tint:    rgba(4,120,87,0.10);
  --chart-gridline:         rgba(99,81,61,0.18);
  --chart-plot-border:      rgba(99,81,61,0.30);
  --chart-divider:          rgba(99,81,61,0.40);
  --chart-segmented-bg:     rgba(99,81,61,0.06);
  --chart-segmented-active: rgba(255,255,255,1);
  --chart-bubble-text:      #FFFFFF;
}

/* === THEME 3 · SAND (warm cream, editorial) ================================ */
.theme-sand {
  --bg-base:               #ECE3D0;
  --bg-elev-1:             #F5EFDF;
  --bg-elev-2:             #F8F2E2;
  --bg-elev-3:             #DFD4BA;

  --glass-tint:            rgba(99, 81, 61, 0.05);
  --glass-tint-strong:     rgba(99, 81, 61, 0.09);
  --glass-border:          rgba(99, 81, 61, 0.15);
  --glass-border-strong:   rgba(99, 81, 61, 0.26);

  --text-hi:               #2A1F12;
  --text-mid:              #6B5C45;
  --text-low:              #9C8B6E;

  --accent:                #63513D;
  --accent-strong:         #8B7558;
  --accent-rgb:            99, 81, 61;
  --accent-glow:           rgba(99, 81, 61, 0.30);
  --accent-text:           #FFF8E8;

  --act-strong:            #2D6A3F;
  --act-strong-rgb:        45, 106, 63;
  --act-consider:          #2D5C8F;
  --act-consider-rgb:      45, 92, 143;
  --act-hold:              #C7892F;
  --act-hold-rgb:          199, 137, 47;
  --act-stop:              #B14B47;
  --act-stop-rgb:          177, 75, 71;

  --lens-desire:           #9F2960;
  --lens-need:             #1E3A8A;
  --lens-white:            #5B21B6;

  --shadow-glow-sm:        0 4px 24px rgba(99,81,61,0.13);
  --shadow-glow-md:        0 8px 32px rgba(99,81,61,0.18);
  --shadow-card:           0 6px 20px rgba(99,81,61,0.12),
                           0 1px 2px rgba(99,81,61,0.08);
  --ring-focus:            0 0 0 1.5px var(--accent),
                           0 0 18px rgba(99,81,61,0.30);

  --amb-blob-1:            rgba(99,81,61,0.16);
  --amb-blob-2:            rgba(180,140,100,0.10);
  --grain-opacity:         0.025;
  --grain-blend:           multiply;

  --surface-bar:           rgba(248, 242, 226, 0.72);
  --surface-bar-strong:    rgba(245, 239, 223, 0.85);
  --surface-active:        rgba(99, 81, 61, 0.13);
  --track-bg:              rgba(99, 81, 61, 0.15);
  --thumb-overlay:         rgba(40,30,20,0.45);
  --score-badge-bg:        rgba(45,30,15,0.50);
  --score-badge-border:    rgba(255,248,232,0.22);

  --logo-color:            #63513D;
  --logo-on-accent:        #FFF8E8;
  --bubble-text:           rgba(255,255,255,0.95);

  --chart-compressed-fill:  rgba(99,81,61,0.08);
  --chart-quadrant-tint:    rgba(4,120,87,0.12);
  --chart-gridline:         rgba(99,81,61,0.20);
  --chart-plot-border:      rgba(99,81,61,0.35);
  --chart-divider:          rgba(99,81,61,0.45);
  --chart-segmented-bg:     rgba(99,81,61,0.08);
  --chart-segmented-active: rgba(255,250,235,1);
  --chart-bubble-text:      #FFFFFF;
}

/* === THEME 4 · NESTLE DARK INTELLIGENCE (analytics dark + cyan/violet glow) === */
/* Dual selector: existing class system + data-theme attr for compatibility.    */
.theme-nestle-dark-intelligence,
[data-theme="nestle-dark-intelligence"] {
  --bg-base:               #030712;
  --bg-elev-1:              #071426;
  --bg-elev-2:              #0a1a30;
  --bg-elev-3:              #0f2340;

  --glass-tint:            rgba(10, 26, 48, 0.76);
  --glass-tint-strong:     rgba(12, 31, 56, 0.82);
  --glass-border:          rgba(122, 173, 255, 0.18);
  --glass-border-strong:   rgba(122, 173, 255, 0.34);

  --text-hi:               #f7fbff;
  --text-mid:              #b9c8dc;
  --text-low:              #8fa3bc;

  --accent:                #c59b5e;
  --accent-strong:         #e2bd7a;
  --accent-rgb:            197, 155, 94;
  --accent-glow:           rgba(197, 155, 94, 0.34);
  --accent-text:           #071426;

  /* Dashboard-specific palette (cyan/violet/teal accents) */
  --intel-cyan:            #21d4f3;
  --intel-cyan-rgb:        33, 212, 243;
  --intel-teal:            #00f5d4;
  --intel-purple:          #8e55ff;
  --intel-purple-rgb:      142, 85, 255;
  --intel-violet:          #b34dff;
  --intel-violet-rgb:      179, 77, 255;
  --intel-green:           #2af59c;
  --intel-orange:          #ffb342;
  --intel-danger:          #ff7070;

  /* Action pills mapped onto the bright analytics palette */
  --act-strong:            #2af59c;
  --act-strong-rgb:        42, 245, 156;
  --act-consider:          #21d4f3;
  --act-consider-rgb:      33, 212, 243;
  --act-hold:              #ffb342;
  --act-hold-rgb:          255, 179, 66;
  --act-stop:              #ff7070;
  --act-stop-rgb:          255, 112, 112;

  --lens-desire:           #ff7ad9;
  --lens-need:             #21d4f3;
  --lens-white:            #b34dff;

  --shadow-glow-sm:        0 0 18px rgba(33, 212, 243, 0.22);
  --shadow-glow-md:        0 0 32px rgba(142, 85, 255, 0.32);
  --shadow-card:           0 24px 60px rgba(0, 0, 0, 0.55),
                           0 0 24px rgba(33, 212, 243, 0.08);
  --ring-focus:            0 0 0 1.5px var(--intel-cyan),
                           0 0 22px rgba(33, 212, 243, 0.55);

  --amb-blob-1:            rgba(33, 212, 243, 0.16);
  --amb-blob-2:            rgba(142, 85, 255, 0.14);
  --grain-opacity:         0.04;
  --grain-blend:           screen;

  --surface-bar:           rgba(7, 20, 38, 0.78);
  --surface-bar-strong:    rgba(10, 26, 48, 0.92);
  --surface-active:        rgba(33, 212, 243, 0.18);
  --track-bg:              rgba(122, 173, 255, 0.10);
  --thumb-overlay:         rgba(0, 0, 0, 0.55);
  --score-badge-bg:        rgba(7, 20, 38, 0.65);
  --score-badge-border:    rgba(122, 173, 255, 0.30);

  --logo-color:            #e2bd7a;
  --logo-on-accent:        #071426;
  --bubble-text:           #f7fbff;

  --chart-compressed-fill:  rgba(33, 212, 243, 0.20);
  --chart-quadrant-tint:    rgba(142, 85, 255, 0.10);
  --chart-gridline:         rgba(122, 173, 255, 0.16);
  --chart-plot-border:      rgba(122, 173, 255, 0.24);
  --chart-divider:          rgba(122, 173, 255, 0.22);
  --chart-segmented-bg:     rgba(7, 20, 38, 0.55);
  --chart-segmented-active: rgba(33, 212, 243, 0.22);
  --chart-bubble-text:      #f7fbff;
}

/* === THEME 5 · DEEP SUMMIT (editorial dark glassmorphic, debate-first) ====== */
/* Source: docs/archive/docs/UI_debate_upgrade_v2/debate-ui-design-spec.md
   Aesthetic: warm-purple-black surfaces, cream ink (#f6f1e6), mint/peach/gold
   role accents matching the v2 debate spec. Fraunces serif headlines already
   loaded in index.html (line 12), no font-link change needed. */
.theme-deep-summit,
[data-theme="deep-summit"] {
  /* Surfaces — 3-tier warm-purple-black per v2 spec */
  --bg-base:               #0a0810;
  --bg-elev-1:             #14101c;
  --bg-elev-2:             #1c1726;
  --bg-elev-3:             #252035;

  /* Glass — sit on warm-black, low-alpha cream tint */
  --glass-tint:            rgba(255, 255, 255, 0.045);
  --glass-tint-strong:     rgba(255, 255, 255, 0.075);
  --glass-border:          rgba(255, 255, 255, 0.08);
  --glass-border-strong:   rgba(255, 255, 255, 0.14);

  /* Text — warm cream ink, alpha tiers */
  --text-hi:               #f6f1e6;
  --text-mid:              #b3afa4;   /* ~rgba(246,241,230,0.72) on bg-base */
  --text-low:              #6c6963;   /* ~rgba(246,241,230,0.42) */

  /* Accent — editorial gold (matches gatekeeper / v2 --gold) */
  --accent:                #d4af7a;
  --accent-strong:         #e8c490;
  --accent-rgb:            212, 175, 122;
  --accent-glow:           rgba(212, 175, 122, 0.38);
  --accent-text:           #1a1308;

  /* MENA action — warm pastel re-tint (mint / cyan-fade / amber / coral) */
  --act-strong:            #b8e0c4;
  --act-strong-rgb:        184, 224, 196;
  --act-consider:          #8fb8e6;
  --act-consider-rgb:      143, 184, 230;
  --act-hold:              #d4af7a;
  --act-hold-rgb:          212, 175, 122;
  --act-stop:              #f0b9a0;
  --act-stop-rgb:          240, 185, 160;

  /* Lens accents — soft warm tones */
  --lens-desire:           #f0b9a0;
  --lens-need:             #8fb8e6;
  --lens-white:            #c9b6f2;

  /* Shadows + focus — warm-gold glow on deep navy */
  --shadow-glow-sm:        0 0 20px rgba(212,175,122,0.15);
  --shadow-glow-md:        0 0 40px rgba(212,175,122,0.22),
                           inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-card:           0 30px 80px -20px rgba(0,0,0,0.6),
                           inset 0 1px 0 rgba(255,255,255,0.04);
  --ring-focus:            0 0 0 1.5px var(--accent),
                           0 0 20px var(--accent-glow);

  /* Ambient blobs — peach + mint drift behind the editorial canvas */
  --amb-blob-1:            rgba(240,185,160,0.18);
  --amb-blob-2:            rgba(184,224,196,0.14);
  --grain-opacity:         0.04;
  --grain-blend:           overlay;

  /* Semantic bars */
  --surface-bar:           rgba(20, 16, 28, 0.70);
  --surface-bar-strong:    rgba(10, 8, 16, 0.80);
  --surface-active:        rgba(255, 255, 255, 0.06);
  --track-bg:              rgba(255, 255, 255, 0.06);
  --thumb-overlay:         rgba(10, 8, 16, 0.70);
  --score-badge-bg:        rgba(0, 0, 0, 0.50);
  --score-badge-border:    rgba(255, 255, 255, 0.15);

  --logo-color:            #d4af7a;
  --logo-on-accent:        #1a1308;
  --bubble-text:           rgba(0, 0, 0, 0.65);

  /* 2×2 chart */
  --chart-compressed-fill:  rgba(255, 255, 255, 0.025);
  --chart-quadrant-tint:    rgba(184, 224, 196, 0.10);
  --chart-gridline:         rgba(255, 255, 255, 0.08);
  --chart-plot-border:      rgba(255, 255, 255, 0.16);
  --chart-divider:          rgba(255, 255, 255, 0.20);
  --chart-segmented-bg:     rgba(255, 255, 255, 0.05);
  --chart-segmented-active: rgba(255, 255, 255, 0.10);
  --chart-bubble-text:      #f6f1e6;

  /* Debate role palette — Deep Summit's signature mint/peach/gold trio */
  --role-advocate:            #b8e0c4;
  --role-advocate-soft:       rgba(184, 224, 196, 0.18);
  --role-advocate-glow:       rgba(184, 224, 196, 0.40);
  --role-advocate-text:       #1f4e34;

  --role-challenger:          #f0b9a0;
  --role-challenger-soft:     rgba(240, 185, 160, 0.18);
  --role-challenger-glow:     rgba(240, 185, 160, 0.40);
  --role-challenger-text:     #6e3a25;

  --role-gatekeeper:          #d4af7a;
  --role-gatekeeper-soft:     rgba(212, 175, 122, 0.18);
  --role-gatekeeper-glow:     rgba(212, 175, 122, 0.40);
  --role-gatekeeper-text:     #5e4319;

  --role-neutral:             rgba(246, 241, 230, 0.42);
  --role-neutral-soft:        rgba(246, 241, 230, 0.08);
  --role-neutral-glow:        rgba(246, 241, 230, 0.20);

  /* Evidence + collision — keep dramatic warm gold + plum spark */
  --evidence-amber:           #d4af7a;
  --evidence-amber-soft:      rgba(212, 175, 122, 0.18);
  --evidence-glow:            rgba(212, 175, 122, 0.50);
  --evidence-glow-strong:     rgba(212, 175, 122, 0.78);

  --collision-spark:          #8b6fa8;
  --collision-glow:           rgba(139, 111, 168, 0.40);

  --mover-color:              var(--evidence-amber);
  --anchor-color:             var(--role-neutral);
  --flipper-color:            var(--collision-spark);

  /* Typography — Fraunces is preloaded in index.html L12, so display works
     identically to midnight. Body stays on Inter (Manrope is NOT loaded in
     static_new; using it would silently fall back). The v2 spec's editorial
     feel is carried by Fraunces serif headlines, not the body font. */
  --font-display: "Fraunces", "GT Sectra Display", Georgia, serif;
  --font-quote:   "Fraunces", Georgia, serif;
}

/* === Smooth transitions when theme switches ================================ */
body,
.sidebar, .topbar,
.greeting-hero, .kpi-card, .session-card, .snapshot-card,
.persona-card, .concept-card, .lens-card, .result-hero,
.bachart, .settings-section, .plan-card, .feature-card,
.stack-card, .login-brand, .filter-bar, .persona-strip {
  transition: background-color 600ms var(--ease-out-soft),
              border-color     600ms var(--ease-out-soft),
              color            600ms var(--ease-out-soft),
              box-shadow       600ms var(--ease-out-soft);
}

/* === Reduced motion respect ================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Typology colour palette (theme-independent) ============================
 * 32 mid-tone hues that read on both dark and light surfaces. Each typology
 * in a project is assigned one slot by ui/util.js typologyColorIndex(), and
 * every persona inherits its typology's slot via --persona-type-color /
 * --persona-type-rgb. Add new slots in pairs and bump TYPOLOGY_COLOR_COUNT.
 * ========================================================================== */
:root {
  --typ-1:  #E5533D; --typ-1-rgb:  229, 83, 61;
  --typ-2:  #F0873A; --typ-2-rgb:  240, 135, 58;
  --typ-3:  #E3B23C; --typ-3-rgb:  227, 178, 60;
  --typ-4:  #B9C64A; --typ-4-rgb:  185, 198, 74;
  --typ-5:  #6BBF59; --typ-5-rgb:  107, 191, 89;
  --typ-6:  #2FAF8C; --typ-6-rgb:  47, 175, 140;
  --typ-7:  #35B8C9; --typ-7-rgb:  53, 184, 201;
  --typ-8:  #4A9BE0; --typ-8-rgb:  74, 155, 224;
  --typ-9:  #5F72E8; --typ-9-rgb:  95, 114, 232;
  --typ-10: #8E5FE0; --typ-10-rgb: 142, 95, 224;
  --typ-11: #C060D6; --typ-11-rgb: 192, 96, 214;
  --typ-12: #E0569A; --typ-12-rgb: 224, 86, 154;
  --typ-13: #E8788A; --typ-13-rgb: 232, 120, 138;
  --typ-14: #C97A4B; --typ-14-rgb: 201, 122, 75;
  --typ-15: #A98A5A; --typ-15-rgb: 169, 138, 90;
  --typ-16: #7FA35A; --typ-16-rgb: 127, 163, 90;
  --typ-17: #3F9F74; --typ-17-rgb: 63, 159, 116;
  --typ-18: #4FA7B5; --typ-18-rgb: 79, 167, 181;
  --typ-19: #6B8FD6; --typ-19-rgb: 107, 143, 214;
  --typ-20: #9A7BD9; --typ-20-rgb: 154, 123, 217;
  --typ-21: #B56FB8; --typ-21-rgb: 181, 111, 184;
  --typ-22: #D46B7A; --typ-22-rgb: 212, 107, 122;
  --typ-23: #D9895B; --typ-23-rgb: 217, 137, 91;
  --typ-24: #BFA84A; --typ-24-rgb: 191, 168, 74;
  --typ-25: #86B84D; --typ-25-rgb: 134, 184, 77;
  --typ-26: #4DB3A5; --typ-26-rgb: 77, 179, 165;
  --typ-27: #5A8EC4; --typ-27-rgb: 90, 142, 196;
  --typ-28: #7A6FC9; --typ-28-rgb: 122, 111, 201;
  --typ-29: #A85FA0; --typ-29-rgb: 168, 95, 160;
  --typ-30: #C9506B; --typ-30-rgb: 201, 80, 107;
  --typ-31: #B87A9B; --typ-31-rgb: 184, 122, 155;
  --typ-32: #6E9E9C; --typ-32-rgb: 110, 158, 156;
}