/* tokens.css — Design system Victoria.app (PR#9)
 *
 * Architecture en 3 couches :
 *   1) Primitives   — valeurs brutes (palette, échelles), sans sens sémantique
 *   2) Sémantique   — alias purpose-based, thématisés (bg, surface, text…)
 *   3) Composants   — définis ailleurs (victoria-chat.css, PR#10-12)
 *
 * Thèmes :
 *   - Dark par défaut sur `:root`
 *   - Light via `@media (prefers-color-scheme: light)` (quand aucun thème explicite)
 *   - `[data-theme="light"]` / `[data-theme="dark"]` — préférence user persistée
 *
 * Alias legacy (--bg, --gold, --r, --font-body…) : compat avec les templates
 * existants (dashboard, admin, login…). Déclarés une seule fois dans `:root`
 * via `var()` → suivent automatiquement les changements de thème.
 */

/* ════════════════════════════════════════════════════════════════════════
   Layer 1 — PRIMITIVES (raw values, no semantic meaning)
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette Gold — identité visuelle principale ─────────────────── */
  --vic-gold-50:  #FBF6EC;
  --vic-gold-100: #F2E5C9;
  --vic-gold-200: #E4C07A;
  --vic-gold-300: #D4B67E;
  --vic-gold-400: #C8A46E;
  --vic-gold-500: #B0874F;
  --vic-gold-600: #9A6E30;
  --vic-gold-700: #8B7345;
  --vic-gold-800: #6B5830;
  --vic-gold-900: #2B2312;

  /* ── Palette Earth — surfaces sombres et claires ─────────────────── */
  --vic-earth-50:  #F5F3EF;
  --vic-earth-100: #EDE8DE;
  --vic-earth-200: #E5DFD3;
  --vic-earth-300: #DDD7CA;
  --vic-earth-400: #9A9590;
  --vic-earth-500: #6B6459;
  --vic-earth-600: #3A3630;
  --vic-earth-700: #211F1B;
  --vic-earth-800: #1A1814;
  --vic-earth-850: #1A1916;
  --vic-earth-900: #131210;
  --vic-earth-950: #0C0B09;

  /* ── Palette Ink — textes ─────────────────────────────────────────── */
  --vic-ink-50:  #E8E2D8;
  --vic-ink-200: #C7BFAF;
  --vic-ink-400: #9B9484;
  --vic-ink-450: #857E70; /* WCAG AA — 5.2:1 sur fond sombre */
  --vic-ink-500: #7A7068;
  --vic-ink-600: #6B6459;
  --vic-ink-800: #5A4E42;
  --vic-ink-900: #1A1714;

  /* ── Status — succès, warning, danger ─────────────────────────────── */
  --vic-success-200: #9ED8A8;
  --vic-success-400: #6BAD4B;
  --vic-success-500: #2D8B46;
  --vic-success-700: #1E6B33;
  --vic-warning-500: #D4A017;
  --vic-warning-600: #D4652A;
  --vic-danger-200:  #F4C9C9;
  --vic-danger-300:  #F0B4B4;
  --vic-danger-500:  #C42B2B;
  --vic-neutral-500: #6B6459;

  /* ── Epistemic — pills [FAIT] / [HYPOTHÈSE] / etc. ─────────────────
   * Deux palettes par thème (dark = teintes plus claires, light = teintes
   * plus sombres). Cible ≥ 5:1 sur le fond où la pill apparaît
   * EFFECTIVEMENT — pas seulement la page : la pill superpose un
   * rgba(teinte, 0.15) au-dessus du fond ; on mesure le contraste texte
   * vs ce composé. Sur fond message assistant (dark : #1a1918, light :
   * #FFFFFF) c'est lui le vrai pire-cas — pas la page nue.
   * Le mode dark est posé ici sur :root ; le mode light surcharge dans
   * ``[data-theme="light"]`` et ``@media (prefers-color-scheme: light)``.
   * Tons chauds/désaturés dans l'esprit Earth de Victoria :
   * forêt / olive / cuivre / terre cuite / prune / ardoise. Le cuivre
   * (HYPOTHÈSE) prolonge naturellement le doré de l'accent.
   * [Cycle 15 — Item 2 ; Cycle 15b — Item 3 ; Cycle 15c — Item 2]
   *
   * DARK (sur fond assistant #1a1918 + 0.15 overlay) | Hex     | Ratio
   * -------------------------------------------------+---------+-------
   * FAIT (forêt vif)                                 | #6FC089 | 5.98:1
   * ESTIMATION (olive vif)                           | #C8B658 | 6.27:1
   * HYPOTHÈSE (cuivre vif)                           | #E8AD45 | 6.06:1
   * CROYANCE (terre cuite vive)                      | #ED9E7E | 6.23:1
   * OPINION (prune vive)                             | #C9B0E8 | 6.45:1
   * INCONNU (ardoise vive)                           | #BCB4AC | 6.34:1
   * (sur PAGE #0C0B09 nue tous montent à ≥ 8:1.)
   */
  --vic-ep-fait:       #6FC089;
  --vic-ep-estimation: #C8B658;
  --vic-ep-hypothese:  #E8AD45;
  --vic-ep-croyance:   #ED9E7E;
  --vic-ep-opinion:    #C9B0E8;
  --vic-ep-inconnu:    #BCB4AC;
  /* Triples RGB — nécessaires pour composer rgba() côté composant (fond
     transparent + bordure semi-opaque sur la même teinte). */
  --vic-ep-fait-rgb:       111, 192, 137;
  --vic-ep-estimation-rgb: 200, 182, 88;
  --vic-ep-hypothese-rgb:  232, 173, 69;
  --vic-ep-croyance-rgb:   237, 158, 126;
  --vic-ep-opinion-rgb:    201, 176, 232;
  --vic-ep-inconnu-rgb:    188, 180, 172;
  /* Aliases legacy (anciens noms en anglais conservés pour compat). */
  --vic-ep-fact:       var(--vic-ep-fait);
  --vic-ep-hypothesis: var(--vic-ep-hypothese);
  --vic-ep-belief:     var(--vic-ep-croyance);
  --vic-ep-unknown:    var(--vic-ep-inconnu);

  /* ── Espacement — grille 4 px ────────────────────────────────────── */
  --vic-space-0:  0;
  --vic-space-1:  0.25rem;  /*  4px */
  --vic-space-2:  0.5rem;   /*  8px */
  --vic-space-3:  0.75rem;  /* 12px */
  --vic-space-4:  1rem;     /* 16px */
  --vic-space-5:  1.25rem;  /* 20px */
  --vic-space-6:  1.5rem;   /* 24px */
  --vic-space-8:  2rem;     /* 32px */
  --vic-space-10: 2.5rem;   /* 40px */
  --vic-space-12: 3rem;     /* 48px */
  --vic-space-16: 4rem;     /* 64px */

  /* ── Typographie — échelle modulaire ──────────────────────────────── */
  --vic-text-xs:   0.72rem;
  --vic-text-sm:   0.82rem;
  --vic-text-base: 0.95rem;
  --vic-text-md:   1rem;
  --vic-text-lg:   1.15rem;
  --vic-text-xl:   1.35rem;
  --vic-text-2xl:  1.6rem;
  --vic-text-3xl:  2rem;
  --vic-text-4xl:  2.5rem;

  --vic-leading-tight:   1.2;
  --vic-leading-snug:    1.4;
  --vic-leading-normal:  1.55;
  --vic-leading-relaxed: 1.75;

  --vic-weight-regular:  400;
  --vic-weight-medium:   500;
  --vic-weight-semibold: 600;
  --vic-weight-bold:     700;

  --vic-tracking-tight:  -0.01em;
  --vic-tracking-normal: 0;
  --vic-tracking-wide:   0.04em;
  --vic-tracking-wider:  0.08em;

  --vic-font-display: 'Newsreader', Georgia, serif;
  --vic-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --vic-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --vic-radius-none: 0;
  --vic-radius-sm:   4px;
  --vic-radius-md:   8px;
  --vic-radius-lg:   12px;
  --vic-radius-xl:   16px;
  --vic-radius-pill: 999px;

  /* ── Ombres / élévation ───────────────────────────────────────────── */
  --vic-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --vic-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --vic-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
  --vic-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);

  /* ── Mouvement ────────────────────────────────────────────────────── */
  --vic-duration-instant: 80ms;
  --vic-duration-fast:    120ms;
  --vic-duration-base:    180ms;
  --vic-duration-slow:    280ms;

  --vic-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --vic-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --vic-ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* ── Z-index ──────────────────────────────────────────────────────── */
  --vic-z-base:     0;
  --vic-z-dropdown: 10;
  --vic-z-sticky:   20;
  --vic-z-overlay:  30;
  --vic-z-modal:    40;
  --vic-z-toast:    50;

  /* ── Largeurs max ─────────────────────────────────────────────────── */
  --vic-max-shell: 1200px;
  --vic-max-text:  680px;
  --vic-max-chat:  900px;
}

/* ════════════════════════════════════════════════════════════════════════
   Layer 2 — SÉMANTIQUE (thème DARK par défaut)
   Les alias legacy (--bg, --gold, --r…) sont résolus via var() et suivent
   automatiquement tout changement de thème — on ne les redéclare pas.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fonds */
  --vic-color-bg:            var(--vic-earth-950);
  --vic-color-bg-alt:        var(--vic-earth-900);
  --vic-color-bg-raised:     var(--vic-earth-800);
  --vic-color-bg-overlay:    var(--vic-earth-700);
  --vic-color-surface:       var(--vic-earth-850);
  --vic-color-surface-hover: #252320;

  /* Bordures */
  --vic-color-border:        var(--vic-earth-800);
  --vic-color-border-strong: var(--vic-earth-700);
  --vic-color-border-focus:  var(--vic-gold-400);

  /* Textes */
  --vic-color-text:           var(--vic-ink-50);
  --vic-color-text-muted:     var(--vic-ink-400);
  --vic-color-text-subtle:    var(--vic-ink-450);
  --vic-color-text-on-accent: var(--vic-earth-950);

  /* Accent — Gold */
  --vic-color-accent:        var(--vic-gold-400);
  --vic-color-accent-strong: var(--vic-gold-200);
  --vic-color-accent-hover:  var(--vic-gold-300);
  --vic-color-accent-muted:  rgba(200, 164, 110, 0.3);
  /* RGB triple de l'accent — permet aux composants de composer rgba() avec
     une alpha custom (rgba(var(--vic-color-accent-rgb), 0.06)) tout en
     suivant l'accent actif. */
  --vic-color-accent-rgb:    200, 164, 110;

  /* Surfaces spécifiques composants (pour permettre au light mode d'inverser
     proprement les fonds très foncés du chat, des codeblocks, des bulles
     assistant…). [Cycle 10 — Item 7] */
  --vic-color-msg-assistant-bg: #1a1918;
  --vic-color-code-bg:          #0b0a08;
  --vic-color-track-bg:         rgba(255, 255, 255, 0.08);
  --vic-color-track-bg-strong:  rgba(255, 255, 255, 0.06);
  --vic-color-grade-text:       #fff;

  /* Status */
  --vic-color-success: var(--vic-success-500);
  --vic-color-warning: var(--vic-warning-500);
  --vic-color-danger:  var(--vic-danger-500);
  --vic-color-info:    var(--vic-gold-200);

  /* Danger zones (cards "zone dangereuse" + erreurs admin) — adapté par
     thème dans les blocs ci-dessous. ``danger-strong`` = bordure de card +
     fond de bouton ; ``danger-text`` = texte d'erreur en surlignage.
     Dark : rouge sombre + texte rose pâle ; Light : rouge mid + texte rouge
     foncé pour passer WCAG AA. [Cycle 15b — Item 2] */
  --vic-color-danger-strong: #7a2b2b;
  --vic-color-danger-text:   #ffb6b6;

  /* Focus ring (accessibilité) */
  --vic-focus-ring: 0 0 0 2px var(--vic-color-bg),
                    0 0 0 4px var(--vic-color-accent);

  /* ── Alias legacy — compat templates existants ─────────────────────
   * Déclarés une seule fois ; résolus paresseusement via var() → suivent
   * automatiquement le thème actif. Ne pas redéclarer dans les blocs de thème.
   */
  --bg:            var(--vic-color-bg);
  --bg2:           var(--vic-color-bg-alt);
  --bg3:           var(--vic-color-bg-raised);
  --bg4:           var(--vic-color-bg-overlay);
  --surface:       var(--vic-color-surface);
  --surface-hover: var(--vic-color-surface-hover);
  --border:        var(--vic-color-border);

  --text:           var(--vic-color-text);
  --text2:          var(--vic-color-text-muted);
  --text3:          var(--vic-color-text-subtle);
  --text-muted:     var(--vic-ink-500);
  --text-secondary: var(--vic-color-text-muted);

  --gold:       var(--vic-color-accent);
  --gold2:      var(--vic-color-accent-strong);
  --gold3:      var(--vic-gold-700);
  --gold-hover: var(--vic-color-accent-hover);
  --gold-muted: var(--vic-color-accent-muted);

  --sa: var(--vic-success-500);
  --sb: var(--vic-success-400);
  --sc: var(--vic-warning-500);
  --sd: var(--vic-warning-600);
  --se: var(--vic-danger-500);
  --sn: var(--vic-neutral-500);

  --r:  var(--vic-radius-lg);
  --r2: var(--vic-radius-md);

  --f1: var(--vic-font-display);
  --f2: var(--vic-font-body);
  --f3: var(--vic-font-mono);
  --font-display: var(--vic-font-display);
  --font-body:    var(--vic-font-body);

  --max-w: var(--vic-max-shell);
  --max-t: var(--vic-max-text);

  --bg-rgb: 12, 11, 9;
}

/* ════════════════════════════════════════════════════════════════════════
   Layer 2 — Thème LIGHT
   Activé :
     (a) préférence OS claire + aucun `data-theme` explicite
     (b) `data-theme="light"` posé côté client (préférence user)
   ════════════════════════════════════════════════════════════════════════ */

/* Alias legacy en light — valeurs imposées par le DAT v0.10 (SPÉC-09).
 * Ces overrides viennent APRÈS les déclarations `:root` et écrasent les
 * alias dark par défaut. Les sémantiques `--vic-color-*` sont recalées
 * sur les mêmes couleurs pour que les composants (victoria-chat.css etc.)
 * suivent sans régression.
 */

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --vic-color-bg:            #FAF8F5;
    --vic-color-bg-alt:        #F0EDE8;
    --vic-color-bg-raised:     #E8E4DD;
    --vic-color-bg-overlay:    #D4D0C8;
    --vic-color-surface:       #FFFFFF;
    --vic-color-surface-hover: #F0EDE8;

    --vic-color-border:        #D4D0C8;
    --vic-color-border-strong: #BEB8AE;
    --vic-color-border-focus:  #8B6914;

    --vic-color-text:           #1A1A1A;
    --vic-color-text-muted:     #666666;
    --vic-color-text-subtle:    #888888;
    --vic-color-text-on-accent: #FAF8F5;

    --vic-color-accent:        #8B6914;
    --vic-color-accent-strong: #5E4708;
    --vic-color-accent-hover:  #A37E26;
    --vic-color-accent-muted:  rgba(139, 105, 20, 0.25);
    --vic-color-accent-rgb:    139, 105, 20;

    --vic-color-msg-assistant-bg: #FFFFFF;
    --vic-color-code-bg:          #F5F2EC;
    --vic-color-track-bg:         rgba(0, 0, 0, 0.08);
    --vic-color-track-bg-strong:  rgba(0, 0, 0, 0.06);
    --vic-color-grade-text:       #fff;

    --vic-color-danger-strong: #A03333;
    --vic-color-danger-text:   #7A1F1F;

    --bg-rgb: 250, 248, 245;

    /* Pastilles épistémiques — palette light (teintes foncées sur fond
       clair). Toutes ≥ 4.5:1 vs #FAF8F5. [Cycle 15b — Item 3]
       FAIT       #1F5A38  L=0.079  7.68:1
       ESTIMATION #5A5210  L=0.083  7.48:1
       HYPOTHÈSE  #6B4A0F  L=0.081  7.59:1
       CROYANCE   #8B3F25  L=0.092  6.99:1
       OPINION    #4A3076  L=0.049  10.03:1
       INCONNU    #4D4945  L=0.068  8.41:1 */
    --vic-ep-fait:       #1F5A38;
    --vic-ep-estimation: #5A5210;
    --vic-ep-hypothese:  #6B4A0F;
    --vic-ep-croyance:   #8B3F25;
    --vic-ep-opinion:    #4A3076;
    --vic-ep-inconnu:    #4D4945;
    --vic-ep-fait-rgb:       31, 90, 56;
    --vic-ep-estimation-rgb: 90, 82, 16;
    --vic-ep-hypothese-rgb:  107, 74, 15;
    --vic-ep-croyance-rgb:   139, 63, 37;
    --vic-ep-opinion-rgb:    74, 48, 118;
    --vic-ep-inconnu-rgb:    77, 73, 69;

    /* Alias legacy — valeurs exactes DAT v0.10 §SPÉC-09 */
    --bg:              #FAF8F5;
    --bg2:             #F0EDE8;
    --bg3:             #E8E4DD;
    --surface:         #FFFFFF;
    --text:            #1A1A1A;
    --text-secondary:  #666666;
    --gold:            #8B6914;
    --border:          #D4D0C8;
  }
}

[data-theme="light"] {
  --vic-color-bg:            #FAF8F5;
  --vic-color-bg-alt:        #F0EDE8;
  --vic-color-bg-raised:     #E8E4DD;
  --vic-color-bg-overlay:    #D4D0C8;
  --vic-color-surface:       #FFFFFF;
  --vic-color-surface-hover: #F0EDE8;

  --vic-color-border:        #D4D0C8;
  --vic-color-border-strong: #BEB8AE;
  --vic-color-border-focus:  #8B6914;

  --vic-color-text:           #1A1A1A;
  --vic-color-text-muted:     #666666;
  --vic-color-text-subtle:    #888888;
  --vic-color-text-on-accent: #FAF8F5;

  --vic-color-accent:        #8B6914;
  --vic-color-accent-strong: #5E4708;
  --vic-color-accent-hover:  #A37E26;
  --vic-color-accent-muted:  rgba(139, 105, 20, 0.25);
  --vic-color-accent-rgb:    139, 105, 20;

  --vic-color-msg-assistant-bg: #FFFFFF;
  --vic-color-code-bg:          #F5F2EC;
  --vic-color-track-bg:         rgba(0, 0, 0, 0.08);
  --vic-color-track-bg-strong:  rgba(0, 0, 0, 0.06);
  --vic-color-grade-text:       #fff;

  --vic-color-danger-strong: #A03333;
  --vic-color-danger-text:   #7A1F1F;

  --bg-rgb: 250, 248, 245;

  /* Pastilles épistémiques — palette light (teintes foncées sur fond
     clair). Cf. ratios documentés dans le bloc @media ci-dessus.
     [Cycle 15b — Item 3] */
  --vic-ep-fait:       #1F5A38;
  --vic-ep-estimation: #5A5210;
  --vic-ep-hypothese:  #6B4A0F;
  --vic-ep-croyance:   #8B3F25;
  --vic-ep-opinion:    #4A3076;
  --vic-ep-inconnu:    #4D4945;
  --vic-ep-fait-rgb:       31, 90, 56;
  --vic-ep-estimation-rgb: 90, 82, 16;
  --vic-ep-hypothese-rgb:  107, 74, 15;
  --vic-ep-croyance-rgb:   139, 63, 37;
  --vic-ep-opinion-rgb:    74, 48, 118;
  --vic-ep-inconnu-rgb:    77, 73, 69;

  /* Alias legacy — valeurs exactes DAT v0.10 §SPÉC-09 */
  --bg:              #FAF8F5;
  --bg2:             #F0EDE8;
  --bg3:             #E8E4DD;
  --surface:         #FFFFFF;
  --text:            #1A1A1A;
  --text-secondary:  #666666;
  --gold:            #8B6914;
  --border:          #D4D0C8;
}

[data-theme="dark"] {
  --vic-color-bg:            var(--vic-earth-950);
  --vic-color-bg-alt:        var(--vic-earth-900);
  --vic-color-bg-raised:     var(--vic-earth-800);
  --vic-color-bg-overlay:    var(--vic-earth-700);
  --vic-color-surface:       var(--vic-earth-850);
  --vic-color-surface-hover: #252320;

  --vic-color-border:        var(--vic-earth-800);
  --vic-color-border-strong: var(--vic-earth-700);
  --vic-color-border-focus:  var(--vic-gold-400);

  --vic-color-text:           var(--vic-ink-50);
  --vic-color-text-muted:     var(--vic-ink-400);
  --vic-color-text-subtle:    var(--vic-ink-450);
  --vic-color-text-on-accent: var(--vic-earth-950);

  --vic-color-accent:        var(--vic-gold-400);
  --vic-color-accent-strong: var(--vic-gold-200);
  --vic-color-accent-hover:  var(--vic-gold-300);
  --vic-color-accent-muted:  rgba(200, 164, 110, 0.3);
  --vic-color-accent-rgb:    200, 164, 110;

  --vic-color-msg-assistant-bg: #1a1918;
  --vic-color-code-bg:          #0b0a08;
  --vic-color-track-bg:         rgba(255, 255, 255, 0.08);
  --vic-color-track-bg-strong:  rgba(255, 255, 255, 0.06);
  --vic-color-grade-text:       #fff;

  --bg-rgb: 12, 11, 9;

  /* Alias legacy DARK : forcer pour les pages déjà data-theme="dark" */
  --bg:              var(--vic-earth-950);
  --bg2:             var(--vic-earth-900);
  --bg3:             var(--vic-earth-800);
  --surface:         var(--vic-earth-850);
  --text:            var(--vic-ink-50);
  --text-secondary:  var(--vic-ink-400);
  --gold:            var(--vic-gold-400);
  --border:          var(--vic-earth-800);
}

/* ════════════════════════════════════════════════════════════════════════
   Layer 2 — ACCENT (5 palettes)
   Sélecteurs ``[data-accent="..."]`` posés sur <html>. Calibrées pour
   passer WCAG AA en dark ET light mode (texte foncé sur accent + texte
   muet sur fonds). [Cycle 10 — Item 6]
   ════════════════════════════════════════════════════════════════════════ */

/* Dark — verts */
[data-accent="green"] {
  --vic-color-accent:        #5BA86F;
  --vic-color-accent-strong: #88C99B;
  --vic-color-accent-hover:  #7BC18E;
  --vic-color-accent-muted:  rgba(91, 168, 111, 0.3);
  --vic-color-accent-rgb:    91, 168, 111;
  --vic-color-border-focus:  #5BA86F;
  --gold:                    #5BA86F;
  --gold2:                   #88C99B;
  --gold-hover:              #7BC18E;
  --gold-muted:              rgba(91, 168, 111, 0.3);
}
[data-accent="violet"] {
  --vic-color-accent:        #9D7DD9;
  --vic-color-accent-strong: #BCA4E5;
  --vic-color-accent-hover:  #AC91DF;
  --vic-color-accent-muted:  rgba(157, 125, 217, 0.3);
  --vic-color-accent-rgb:    157, 125, 217;
  --vic-color-border-focus:  #9D7DD9;
  --gold:                    #9D7DD9;
  --gold2:                   #BCA4E5;
  --gold-hover:              #AC91DF;
  --gold-muted:              rgba(157, 125, 217, 0.3);
}
[data-accent="blue"] {
  --vic-color-accent:        #5C9EE8;
  --vic-color-accent-strong: #8CBBED;
  --vic-color-accent-hover:  #76ACE9;
  --vic-color-accent-muted:  rgba(92, 158, 232, 0.3);
  --vic-color-accent-rgb:    92, 158, 232;
  --vic-color-border-focus:  #5C9EE8;
  --gold:                    #5C9EE8;
  --gold2:                   #8CBBED;
  --gold-hover:              #76ACE9;
  --gold-muted:              rgba(92, 158, 232, 0.3);
}
/* Argent — délicat : on prend un gris clair avec une teinte légèrement
   bleutée pour rester lisible sur sombre, et un gris moyen pour le hover. */
[data-accent="silver"] {
  --vic-color-accent:        #B8B8C0;
  --vic-color-accent-strong: #DCDCE0;
  --vic-color-accent-hover:  #C8C8D0;
  --vic-color-accent-muted:  rgba(184, 184, 192, 0.3);
  --vic-color-accent-rgb:    184, 184, 192;
  --vic-color-border-focus:  #B8B8C0;
  --gold:                    #B8B8C0;
  --gold2:                   #DCDCE0;
  --gold-hover:              #C8C8D0;
  --gold-muted:              rgba(184, 184, 192, 0.3);
}

/* Light — accents recalés (foncés pour passer WCAG AA sur fond clair).
   On combine [data-theme="light"] OU prefers-color-scheme:light + pas de
   data-theme avec [data-accent=...]. */
[data-theme="light"][data-accent="green"] {
  --vic-color-accent:        #2E7D45;
  --vic-color-accent-strong: #1F5A2F;
  --vic-color-accent-hover:  #3F9059;
  --vic-color-accent-muted:  rgba(46, 125, 69, 0.22);
  --vic-color-accent-rgb:    46, 125, 69;
  --vic-color-border-focus:  #2E7D45;
  --gold:                    #2E7D45;
}
[data-theme="light"][data-accent="violet"] {
  --vic-color-accent:        #6B47B8;
  --vic-color-accent-strong: #4F3290;
  --vic-color-accent-hover:  #7E5FCB;
  --vic-color-accent-muted:  rgba(107, 71, 184, 0.22);
  --vic-color-accent-rgb:    107, 71, 184;
  --vic-color-border-focus:  #6B47B8;
  --gold:                    #6B47B8;
}
[data-theme="light"][data-accent="blue"] {
  --vic-color-accent:        #2C6BC2;
  --vic-color-accent-strong: #1F4F94;
  --vic-color-accent-hover:  #3F7BD0;
  --vic-color-accent-muted:  rgba(44, 107, 194, 0.22);
  --vic-color-accent-rgb:    44, 107, 194;
  --vic-color-border-focus:  #2C6BC2;
  --gold:                    #2C6BC2;
}
[data-theme="light"][data-accent="silver"] {
  --vic-color-accent:        #6B6B72;
  --vic-color-accent-strong: #4A4A50;
  --vic-color-accent-hover:  #828289;
  --vic-color-accent-muted:  rgba(107, 107, 114, 0.22);
  --vic-color-accent-rgb:    107, 107, 114;
  --vic-color-border-focus:  #6B6B72;
  --gold:                    #6B6B72;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme])[data-accent="green"] {
    --vic-color-accent:        #2E7D45;
    --vic-color-accent-strong: #1F5A2F;
    --vic-color-accent-hover:  #3F9059;
    --vic-color-accent-muted:  rgba(46, 125, 69, 0.22);
    --vic-color-accent-rgb:    46, 125, 69;
    --vic-color-border-focus:  #2E7D45;
    --gold: #2E7D45;
  }
  :root:not([data-theme])[data-accent="violet"] {
    --vic-color-accent:        #6B47B8;
    --vic-color-accent-strong: #4F3290;
    --vic-color-accent-hover:  #7E5FCB;
    --vic-color-accent-muted:  rgba(107, 71, 184, 0.22);
    --vic-color-accent-rgb:    107, 71, 184;
    --vic-color-border-focus:  #6B47B8;
    --gold: #6B47B8;
  }
  :root:not([data-theme])[data-accent="blue"] {
    --vic-color-accent:        #2C6BC2;
    --vic-color-accent-strong: #1F4F94;
    --vic-color-accent-hover:  #3F7BD0;
    --vic-color-accent-muted:  rgba(44, 107, 194, 0.22);
    --vic-color-accent-rgb:    44, 107, 194;
    --vic-color-border-focus:  #2C6BC2;
    --gold: #2C6BC2;
  }
  :root:not([data-theme])[data-accent="silver"] {
    --vic-color-accent:        #6B6B72;
    --vic-color-accent-strong: #4A4A50;
    --vic-color-accent-hover:  #828289;
    --vic-color-accent-muted:  rgba(107, 107, 114, 0.22);
    --vic-color-accent-rgb:    107, 107, 114;
    --vic-color-border-focus:  #6B6B72;
    --gold: #6B6B72;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Préférences utilisateur système
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --vic-duration-instant: 0ms;
    --vic-duration-fast:    0ms;
    --vic-duration-base:    0ms;
    --vic-duration-slow:    0ms;
  }
}

::selection {
  background: var(--vic-color-accent-muted);
  color: var(--vic-color-text);
}