/* ============================================================
   TOKENS.CSS — Design Tokens
   Layer 0: All CSS custom properties — palette, typography,
   spacing, radius, transitions, z-index, focus ring.
   No rules, no selectors except :root and media overrides.
   ============================================================ */

/* ============================================================
   CONTRAST CONSTRAINTS — WCAG 2.1 AA (mandatory for all themes)
   ============================================================
   Every text/background pair must meet:
     - Normal text (< 18pt / 14pt bold):  CR ≥ 4.5:1
     - Large text  (≥ 18pt / 14pt bold):  CR ≥ 3.0:1
     - UI components / active icons:       CR ≥ 3.0:1

   Token pairs to verify per theme/personality:
     --text-primary   on --bg-base       → target ≥ 7:1  (AAA)
     --text-secondary on --bg-base       → target ≥ 4.5:1 (AA)
     --text-muted     on --bg-base       → MINIMUM 4.5:1  (AA)
     --text-muted     on --bg-surface    → MINIMUM 4.5:1  (AA)
     --amber          on --bg-base       → MINIMUM 3.0:1  (UI)

   Verify with:
     https://webaim.org/resources/contrastchecker/
     https://www.myndex.com/APCA/
     make test-playwright  (axe-core accessibility spec)

   When adding or modifying a palette, document measured CRs
   in a comment next to the token values below.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

:root {
  /* ----------------------------------------------------------
     PALETTE
     ---------------------------------------------------------- */
  --bg-base:      #111210;
  --bg-surface:   #1a1b18;
  --bg-elevated:  #222420;
  --border:       #2e302b;
  --border-light: #3a3d36;

  /* Contrast vs bg-base #111210 / bg-surface #1a1b18 (Playwright measured):
       text-primary   / bg-base:    14.78:1 (AAA)
       text-secondary / bg-base:     5.51:1 (AA)
       text-muted     / bg-base:     5.35:1 (AA)
       text-muted     / bg-surface:  4.92:1 (AA) */
  --text-primary:   #e8e4d8;
  --text-secondary: #8a8c82;
  --text-muted:     #878a80;

  --amber:      #d4a843;
  --amber-dim:  color-mix(in srgb, var(--amber) 40%, transparent);
  --amber-glow: color-mix(in srgb, #d4a843 12%, transparent);
  --green:      #6aaa6a;
  --green-dim:  color-mix(in srgb, #6aaa6a 15%, transparent);
  --red:        #c05a4a;
  --priority-high:   var(--red);
  --priority-medium: #c07a28;
  --priority-low:    #3d7ab5;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* Fluid type scale using clamp() — no breakpoints needed */
  --step--2: clamp(0.625rem, 0.6rem  + 0.125vw, 0.6875rem);
  --step--1: clamp(0.75rem,  0.72rem + 0.15vw,  0.8125rem);
  --step-0:  clamp(0.875rem, 0.84rem + 0.18vw,  0.9375rem);
  --step-1:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --step-2:  clamp(1.2rem,   1.1rem  + 0.5vw,  1.5rem);
  --step-3:  clamp(1.5rem,   1.2rem  + 1.5vw,  2.25rem);
  --step-4:  clamp(2rem,     1.4rem  + 3vw,    3.5rem);

  /* ----------------------------------------------------------
     SPACING (4px base grid)
     ---------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Semantic spacing aliases — prefer over --space-N in new components */
  --space-compact:     var(--space-2);  /*  8px — dense, éléments liés */
  --space-standard:    var(--space-4);  /* 16px — défaut entre éléments */
  --space-comfortable: var(--space-6);  /* 24px — aéré, sections */
  --gap-tight:   var(--space-2);
  --gap-normal:  var(--space-4);
  --gap-section: var(--space-8);

  /* Breakpoints standard Asheeve (px — référence, non utilisables dans @media via var())
     mobile:  640px  — déjà utilisé
     tablet:  768px
     desktop: 1024px
     Mobile-first : min-width */

  /* ----------------------------------------------------------
     RADIUS
     ---------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --ease: var(--transition-speed, 0.15s) ease-in-out;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal-backdrop: 400;
  --z-modal:    500;
  --z-popover:  600;
  --z-tooltip:  700;
  --z-toast:    800;

  /* ----------------------------------------------------------
     MOBILE / VIEWPORT PRIMITIVES (Phase 3 of styling plan)
     Named anchors for layout decisions that previously hard-coded
     pixel values inside components. Themes may re-bind these per
     personality; mobile components reference them via var().
     ---------------------------------------------------------- */
  --nav-height:              4rem;           /* horizontal nav row height (~64px) */
  --mobile-menu-inline-size: min(17.5rem, 100vw); /* hamburger drawer width */
  --modal-max-block-size:    min(90dvh, calc(100% - 2 * var(--space-4))); /* modal cap that respects mobile chrome */
  --touch-target-min:        2.75rem;        /* 44px — WCAG 2.5.5 (AAA target size) */
  --overlay-shadow:          0 8px 32px rgba(0, 0, 0, .35);

  /* ----------------------------------------------------------
     ICON SIZES
     ---------------------------------------------------------- */
  --icon-sm: 1.5rem;
  --icon-md: 2rem;
  --icon-lg: 2.25rem;

  /* ----------------------------------------------------------
     ANIMATION DURATIONS
     ---------------------------------------------------------- */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  /* ----------------------------------------------------------
     COMPONENT SIZING
     ---------------------------------------------------------- */
  --progress-height: 4px;

  /* ----------------------------------------------------------
     FOCUS RING
     ---------------------------------------------------------- */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  color-mix(in srgb, var(--amber) 60%, transparent);
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* ----------------------------------------------------------
   BASE STYLES
   ---------------------------------------------------------- */

html {
  font-family: 'Inter Tight', var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--line-height-base, 1.6);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ----------------------------------------------------------
   FOCUS VISIBLE
   ----------------------------------------------------------
   ADR-013 § Phase 5.5 — no global :focus { outline: none }. Per-element
   focus styling lives below (and on form inputs in blocks.css), which
   suppresses the UA outline only where a custom ring (border-color /
   box-shadow) replaces it. Elsewhere, the UA default ring is the
   fallback so keyboard focus is never silently invisible. */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--amber-dim);
  outline-offset: var(--focus-ring-offset);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--amber);
  outline-offset: var(--focus-ring-offset);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--amber-dim);
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------
   PRINT
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   THEME: light
   ---------------------------------------------------------- */
[data-theme="light"] {
  --bg-base:      #f5f4f0;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ede9e0;
  --border:       #d4cfc4;
  --border-light: #c8c2b5;

  /* Contrast vs bg-base #f5f4f0 / bg-surface #ffffff (Playwright measured):
       text-primary   / bg-base:    15.72:1 (AAA)
       text-secondary / bg-base:     7.83:1 (AA)
       text-muted     / bg-base:     5.65:1 (AA)
       text-muted     / bg-surface:  6.22:1 (AA) */
  --text-primary:   #1a1b18;
  --text-secondary: #4a4d44;
  --text-muted:     #5f6259;

  --amber:      oklch(0.82 0.17 65);
  --amber-dim:  color-mix(in srgb, var(--amber) 40%, transparent);
  --amber-glow: color-mix(in srgb, var(--amber) 15%, transparent);
  --green:      #3a7a3a;
  --green-dim:  color-mix(in srgb, #3a7a3a 15%, transparent);
  --red:        #a03828;
  --priority-high:   var(--red);
  --priority-medium: #a06020;
  --priority-low:    #2d5f8a;
}

/* ----------------------------------------------------------
   THEME: nord (blue-grey)
   ---------------------------------------------------------- */
[data-theme="nord"] {
  --bg-base:      #2e3440;
  --bg-surface:   #3b4252;
  --bg-elevated:  #434c5e;
  --border:       #4c566a;
  --border-light: #5a6480;

  /* Contrast vs bg-base #2e3440 / bg-surface #3b4252 (Playwright measured):
       text-primary   / bg-base:    10.84:1 (AAA)
       text-secondary / bg-base:     9.25:1 (AAA)
       text-muted     / bg-base:     5.66:1 (AA)
       text-muted     / bg-surface:  4.56:1 (AA) */
  --text-primary:   #eceff4;
  --text-secondary: #d8dee9;
  --text-muted:     #aeafaa;

  --amber:      #88c0d0;
  --amber-dim:  #5e8fa0;
  --amber-glow: color-mix(in srgb, #88c0d0 12%, transparent);
  --green:      #a3be8c;
  --green-dim:  color-mix(in srgb, #a3be8c 15%, transparent);
  --red:        #bf616a;
}

@media print {
  :root {
    --bg-base:      #ffffff;
    --bg-surface:   #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
  }
}

/* ============================================================
   PERSONALITIES — UX mode token overrides
   Applied via data-personality attribute on <body>.
   Each block defines BOTH the ENEUX spec names (forward compat)
   AND bridge mappings to existing token names in blocks.css.
   ============================================================ */

/* ── Clarity: "La salle des cartes" ── */
body[data-personality="clarity"] {
  /* ENEUX spec tokens */
  --font-base: 'IBM Plex Mono', monospace;
  --font-display: 'IBM Plex Sans', sans-serif;
  --space-base: 0.5rem;
  --color-accent: #58a6ff;
  --radius-default: 2px;
  --shadow-default: none;
  --transition-speed: 0ms;
  --sidebar-width: 280px;

  /* Bridge: remap to names blocks.css reads */
  --font-sans: 'IBM Plex Mono', monospace;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-serif: 'IBM Plex Sans', sans-serif;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --amber: #58a6ff;
  --amber-dim: color-mix(in srgb, #58a6ff 40%, transparent);
  --amber-glow: color-mix(in srgb, #58a6ff 12%, transparent);

  /* Phase 5: center-specific typography tokens (theme-independent) */
  --line-height-base: 1.4;
  --font-size-base: 0.875rem;
  --color-accent-secondary: #3fb950;
  --nav-label-display: flex;
}

/* ── Flow: "L'atelier" ── */
body[data-personality="flow"] {
  /* ENEUX spec tokens */
  --font-base: 'Lora', serif;
  --font-display: 'Instrument Serif', serif;
  --space-base: 1rem;
  --color-accent: #9b6dff;
  --radius-default: 16px;
  --shadow-default: 0 4px 24px rgba(0,0,0,.3);
  --transition-speed: 300ms;
  --sidebar-width: 260px;

  /* Bridge: remap to names blocks.css reads */
  --font-sans: 'Lora', serif;
  --font-mono: 'Lora', serif;
  --font-serif: 'Instrument Serif', serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --amber: #9b6dff;
  --amber-dim: color-mix(in srgb, #9b6dff 40%, transparent);
  --amber-glow: color-mix(in srgb, #9b6dff 12%, transparent);

  /* Phase 5: center-specific typography tokens (theme-independent) */
  --line-height-base: 1.7;
  --font-size-base: 1rem;
  --color-accent-secondary: #f5c842;
  --nav-label-display: flex;
}

/* ── Momentum: "Le terrain" ──
   Topbar nav variant. Bebas Neue display, condensed sans body, molten orange accent.
   The personality is registered as a top-level option in the UI picker; without this
   block it silently falls through to :root defaults (yellow amber + serif) which
   misaligns with the design intent. */
body[data-personality="momentum"] {
  /* ENEUX spec tokens */
  --font-base: 'Inter', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --space-base: 1rem;
  --color-accent: #d4541a;
  --radius-default: 24px;
  --shadow-default: none;
  --transition-speed: 100ms;
  --sidebar-width: 0px;

  /* Bridge: remap to names blocks.css reads */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --font-serif: 'Bebas Neue', sans-serif;
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 24px;
  --amber: #d4541a;
  --amber-dim: color-mix(in srgb, #d4541a 40%, transparent);
  --amber-glow: color-mix(in srgb, #d4541a 12%, transparent);

  /* Phase 5: center-specific typography tokens (theme-independent) */
  --line-height-base: 1.5;
  --font-size-base: 1rem;
  --color-accent-secondary: #e8c547;
  --nav-label-display: flex;
}

/* ── Phase 5: personality bg overrides — dark theme only ──
   Scoped to html[data-theme="dark"] so light/nord themes keep their own backgrounds.
   ────────────────────────────────────────────────────────── */
html[data-theme="dark"] body[data-personality="momentum"] {
  /* bg-surface #2d2d2d is lighter than :root — overrides text-muted. */
  --bg-base: #1a1a1a;
  --bg-surface: #2d2d2d;
  --bg-elevated: #383838;
  --border: #4a4a4a;
  --text-muted: #999b94;
}

html[data-theme="dark"] body[data-personality="clarity"] {
  /* Inherits :root text colors — Playwright measured:
       text-muted / bg-base #0d1117:    5.39:1 (AA)
       text-muted / bg-surface #161b22: 4.92:1 (AA) */
  --bg-base: #0d1117;
  --bg-surface: #161b22;
  --bg-elevated: #21262d;
  --border: #30363d;
}

html[data-theme="dark"] body[data-personality="flow"] {
  /* bg-surface #2a2320 is lighter than :root — overrides text-muted. Playwright measured:
       text-muted / bg-base #1c1714:    5.49:1 (AA)
       text-muted / bg-surface #2a2320: 4.78:1 (AA) */
  --bg-base: #1c1714;
  --bg-surface: #2a2320;
  --bg-elevated: #33291f;
  --border: #3d342f;
  --border-light: #4d423b;
  --text-muted: #8e9088;
  --amber: #b08aff;
  --amber-dim: color-mix(in srgb, #b08aff 40%, transparent);
  --amber-glow: color-mix(in srgb, #b08aff 12%, transparent);
}

/* ── Default: "Le bureau vide" ── */
/* Bold editorial. Inter Tight display + JetBrains Mono meta. Flat geometry. Warm amber. */
body[data-personality="bold"] {
  /* ENEUX spec tokens */
  --font-base:    'Inter Tight', 'Inter', sans-serif;
  --font-display: 'Inter Tight', 'Inter', sans-serif;
  --space-base:   0.75rem;
  --color-accent: #d4a843;
  --radius-default: 4px;
  --shadow-default: none;
  --transition-speed: 120ms;
  --sidebar-width: 260px;

  /* Bridge: remap to names blocks.css reads */
  --font-sans:  'Inter Tight', 'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --amber:      oklch(0.82 0.17 65);
  --amber-dim:  color-mix(in srgb, var(--amber) 40%, transparent);
  --amber-glow: color-mix(in srgb, var(--amber) 12%, transparent);

  /* Typography */
  --line-height-base: 1.45;
  --font-size-base:   0.95rem;
  --color-accent-secondary: #e8c547;

  /* Letter-spacing: tight display, normal body */
  letter-spacing: -0.01em;
  --nav-label-display: flex;
}

html[data-theme="dark"] body[data-personality="bold"] {
  /* bg-surface #252318 is lighter than :root — overrides text-muted. Playwright measured:
       text-muted / bg-base #1e1c17:    5.05:1 (AA)
       text-muted / bg-surface #252318: 4.68:1 (AA)
       amber #f5b94a / bg-base: ~9.2:1 (AAA) */
  --bg-base:     #1e1c17;
  --bg-surface:  #252318;
  --bg-elevated: #2d2a1e;
  --border:      rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.14);
  --text-muted:  #8b8d83;
  --amber:      #f5b94a;
  --amber-dim:  rgba(245,185,74,.30);
  --amber-glow: rgba(245,185,74,.10);
}

/* ── Stadium: "Le terrain — jersey orange" ── */
/* Bold scoreboard energy. Bebas Neue display. Jersey orange accent. Near-flat geometry. */
body[data-personality="stadium"] {
  --font-base:    'Inter', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --font-sans:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'Bebas Neue', sans-serif;

  --bg-base:      #f3f0e8;
  --bg-surface:   #ffffff;
  --bg-elevated:  #fffdf7;
  --border:       rgba(14,17,22,0.10);
  --border-light: rgba(14,17,22,0.14);

  /* text-primary #0e1116 / bg-base #f3f0e8 → ~17:1 (AAA)
     text-secondary #3a3f46 / bg-base        → ~8.2:1 (AA)
     text-muted #6b6f78 / bg-base            → ~4.5:1 (AA) */
  --text-primary:   #0e1116;
  --text-secondary: #3a3f46;
  --text-muted:     #6b6f78;

  --amber:      #ff4d17;
  --amber-dim:  rgba(255,77,23,.4);
  --amber-glow: rgba(255,77,23,.14);
  --green:      #1c8d4a;
  --green-dim:  color-mix(in srgb, #1c8d4a 15%, transparent);
  --red:        #c93208;

  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --shadow-default: 3px 3px 0 #0e1116;
  --transition-speed: 80ms;
  --line-height-base: 1.45;
  --font-size-base:   1rem;
  --sidebar-width:    0px;
  --nav-label-display: flex;
}

html[data-theme="dark"] body[data-personality="stadium"] {
  --bg-base:      #1a1a1a;
  --bg-surface:   #262626;
  --bg-elevated:  #303030;
  --border:       rgba(255,255,255,0.10);
  --border-light: rgba(255,255,255,0.16);
  --text-primary:   #f3f0e8;
  --text-secondary: #c0bdb4;
  --text-muted:     #8a8780;
  --amber:      #ff5a28;
  --amber-dim:  rgba(255,90,40,.4);
  --amber-glow: rgba(255,90,40,.16);
  --green:      #3aad6a;
  --red:        #e04a38;
}

/* ── Forge: "La forge — ember glow" ── */
/* Dense slab-serif. Warm parchment. Molten orange with heat-meter gradients. */
body[data-personality="forge"] {
  --font-base:    'Inter Tight', 'Inter', sans-serif;
  --font-display: 'Roboto Slab', serif;
  --font-sans:    'Inter Tight', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'Roboto Slab', serif;

  --bg-base:      #f6efe4;
  --bg-surface:   #fffaf0;
  --bg-elevated:  #fff5e1;
  --border:       rgba(27,21,12,.10);
  --border-light: rgba(27,21,12,.16);

  /* text-primary #1b150c / bg-base #f6efe4 → ~16:1 (AAA)
     text-secondary #4a3c2a / bg-base        → ~7.5:1 (AA)
     text-muted #6e5d44 / bg-base            → ~4.6:1 (AA) */
  --text-primary:   #1b150c;
  --text-secondary: #4a3c2a;
  --text-muted:     #6e5d44;

  --amber:      #e85a18;
  --amber-dim:  rgba(232,90,24,.4);
  --amber-glow: rgba(232,90,24,.16);
  --green:      #2f7d3e;
  --green-dim:  color-mix(in srgb, #2f7d3e 15%, transparent);
  --red:        #b03020;

  --radius-sm:  2px;
  --radius-md:  2px;
  --radius-lg:  4px;
  --shadow-default: 0 4px 12px rgba(232,90,24,.16);
  --transition-speed: 100ms;
  --line-height-base: 1.5;
  --font-size-base:   1rem;
  --sidebar-width:    0px;
  --nav-label-display: none;
}

html[data-theme="dark"] body[data-personality="forge"] {
  --bg-base:      #1e1710;
  --bg-surface:   #2a2018;
  --bg-elevated:  #342820;
  --border:       rgba(255,255,255,0.10);
  --border-light: rgba(255,255,255,0.16);
  --text-primary:   #f6efe4;
  --text-secondary: #c8baa8;
  --text-muted:     #9a8a74;
  --amber:      #ff6a28;
  --amber-dim:  rgba(255,106,40,.4);
  --amber-glow: rgba(255,106,40,.18);
  --green:      #4aad5e;
  --red:        #e04838;
}

/* ── Trophy: "La salle des trophées — oxblood + brass" ── */
/* Anton compressed. Restrained achievement. Oxblood red + brass dividers. */
body[data-personality="trophy"] {
  --font-base:    'Inter', sans-serif;
  --font-display: 'Anton', sans-serif;
  --font-sans:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'Anton', sans-serif;

  --bg-base:      #fbf7ef;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f7f1e3;
  --border:       rgba(26,18,12,.10);
  --border-light: rgba(26,18,12,.16);

  /* text-primary #1a120c / bg-base #fbf7ef → ~17:1 (AAA)
     text-secondary #4a3a2c / bg-base        → ~7.9:1 (AA)
     text-muted #786650 / bg-base            → ~4.6:1 (AA) */
  --text-primary:   #1a120c;
  --text-secondary: #4a3a2c;
  --text-muted:     #786650;

  --amber:      #a8331c;
  --amber-dim:  rgba(168,51,28,.4);
  --amber-glow: rgba(168,51,28,.12);
  --green:      #2a6a3a;
  --green-dim:  color-mix(in srgb, #2a6a3a 15%, transparent);
  --red:        #8c2818;

  /* Brass accent for borders/dividers — used via CSS overrides in blocks */
  --trophy-brass:       #b8893a;
  --trophy-brass-glow:  rgba(184,137,58,.18);

  --radius-sm:  1px;
  --radius-md:  1px;
  --radius-lg:  3px;
  --shadow-default: none;
  --transition-speed: 140ms;
  --line-height-base: 1.45;
  --font-size-base:   1rem;
  --sidebar-width:    0px;
  --nav-label-display: none;
}

html[data-theme="dark"] body[data-personality="trophy"] {
  --bg-base:      #1c1510;
  --bg-surface:   #261e18;
  --bg-elevated:  #302820;
  --border:       rgba(255,255,255,0.10);
  --border-light: rgba(255,255,255,0.16);
  --text-primary:   #fbf7ef;
  --text-secondary: #c8baa8;
  --text-muted:     #9a8878;
  --amber:      #bf4a28;
  --amber-dim:  rgba(191,74,40,.4);
  --amber-glow: rgba(191,74,40,.16);
  --green:      #4aad6a;
  --red:        #c03828;
}

/* ── Harmony: "La sérénité — sage + serif" ── */
/* Cormorant Garamond. Warm rice-paper. Deep sage. Zero radius, hairline geometry. */
body[data-personality="harmony"] {
  --font-base:    'Inter', sans-serif;
  --font-display: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  --font-sans:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'Cormorant Garamond', 'Instrument Serif', Georgia, serif;

  --bg-base:      #f7f6f1;
  --bg-surface:   #fdfcf7;
  --bg-elevated:  #f1efe7;
  --border:       rgba(31,36,33,.10);
  --border-light: rgba(31,36,33,.14);

  /* text-primary #1f2421 / bg-base #f7f6f1 → ~15:1 (AAA)
     text-secondary #4a5650 / bg-base        → ~6.2:1 (AA)
     text-muted #6c7972 / bg-base            → ~4.5:1 (AA) */
  --text-primary:   #1f2421;
  --text-secondary: #4a5650;
  --text-muted:     #6c7972;

  --amber:      #4a7a5e;
  --amber-dim:  rgba(74,122,94,.4);
  --amber-glow: rgba(74,122,94,.08);
  --green:      #4a7a5e;
  --green-dim:  color-mix(in srgb, #4a7a5e 15%, transparent);
  --red:        #944638;

  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --shadow-default: none;
  --transition-speed: 200ms;
  --line-height-base: 1.7;
  --font-size-base:   1rem;
  --sidebar-width:    0px;
  --nav-label-display: flex;

  letter-spacing: 0;
}

html[data-theme="dark"] body[data-personality="harmony"] {
  --bg-base:      #1c1e1d;
  --bg-surface:   #242826;
  --bg-elevated:  #2c3230;
  --border:       rgba(255,255,255,0.10);
  --border-light: rgba(255,255,255,0.14);
  --text-primary:   #f2f0eb;
  --text-secondary: #b0b8b4;
  --text-muted:     #7a8884;
  --amber:      #6aaa82;
  --amber-dim:  rgba(106,170,130,.4);
  --amber-glow: rgba(106,170,130,.10);
  --green:      #6aaa82;
  --red:        #c06858;
}