/* 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 — badges [FAIT] / [HYPOTHÈSE] / etc. ───────────────── */
  --vic-ep-fact:       #4CAF50;
  --vic-ep-estimation: #FF9800;
  --vic-ep-hypothesis: #FFC107;
  --vic-ep-belief:     #E91E63;
  --vic-ep-unknown:    #9E9E9E;

  /* ── 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);

  /* 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);

  /* 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);

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

    /* 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);

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

  /* 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);

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

/* ════════════════════════════════════════════════════════════════════════
   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);
}