/* ═══════════════════════════════════════════════════════════════════════════
   PRINTHIVE DESIGN TOKENS
   Source unique de verite pour couleurs, typographie, espacement, ombres.
   Modifier CE FICHIER pour changer le theme de tout le site.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --bg:        #0c0b09;
  --bg2:       #181614;
  --bg3:       #222018;
  --bg4:       #2c2820;
  --bg-hover:  rgba(255,255,255,0.03);

  /* ── Brand ───────────────────────────────────────────────────────────── */
  --orange:    #e8622a;
  --orange2:   #f5843d;
  --orange-bg: rgba(232,98,42,0.10);
  --orange-bd: rgba(232,98,42,0.20);

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --green:     #4caf7d;
  --green-bg:  rgba(76,175,125,0.08);
  --green-bd:  rgba(76,175,125,0.20);
  --red:       #e85b4a;
  --red-bg:    rgba(232,91,74,0.08);
  --red-bd:    rgba(232,91,74,0.20);
  --amber:     #d4a853;
  --amber-bg:  rgba(212,168,83,0.08);
  --amber-bd:  rgba(212,168,83,0.20);
  --blue:      #4a90d9;
  --blue-bg:   rgba(74,144,217,0.08);
  --blue-bd:   rgba(74,144,217,0.20);

  /* ── Text (high contrast) ────────────────────────────────────────────── */
  --tx-primary:   #ffffff;              /* titres, valeurs KPI, montants      */
  --tx-body:      #f0ebe4;             /* texte courant                      */
  --tx-secondary: #d0c4b8;            /* descriptions, sous-textes          */
  --tx-muted:     #b0a498;            /* labels, placeholders, metadata     */
  --tx-faint:     #887868;            /* desactive, hints tres discrets     */
  --cream:        var(--tx-primary);   /* alias retrocompat                  */
  --text:         var(--tx-body);
  --text2:        var(--tx-secondary);
  --muted:        var(--tx-muted);

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border:    rgba(255,255,255,0.10);
  --border2:   rgba(255,255,255,0.16);
  --border3:   rgba(255,255,255,0.22);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-ui:      'Sora', sans-serif;

  --fs-xs:     10px;
  --fs-sm:     12px;
  --fs-base:   14px;
  --fs-md:     16px;
  --fs-lg:     20px;
  --fs-xl:     28px;
  --fs-2xl:    36px;
  --fs-3xl:    48px;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --ls-tight:  -0.5px;
  --ls-normal:  0.3px;
  --ls-wide:    1px;
  --ls-wider:   1.5px;
  --ls-widest:  2.5px;

  --lh-tight:   1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── Labels (uppercase section headers, KPI labels) ──────────────────── */
  --label-font:     var(--font-body);
  --label-size:     11px;
  --label-weight:   600;
  --label-spacing:  1.5px;
  --label-color:    var(--tx-muted);
  --label-transform: uppercase;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --sp-xs:     4px;
  --sp-sm:     8px;
  --sp-md:     14px;
  --sp-lg:     20px;
  --sp-xl:     28px;
  --sp-2xl:    40px;

  --gap-card:  16px;
  --gap-grid:  16px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --sidebar-w: 260px;
  --topbar-h:  62px;
  --radius:    0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.18);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.15);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.25);
  --glow-orange: 0 0 40px rgba(232,98,42,0.12), 0 0 80px rgba(232,98,42,0.06);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --t-fast:    150ms;
  --t-med:     250ms;
  --ease:      cubic-bezier(0.22, 0.68, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);

  /* ── Focus ───────────────────────────────────────────────────────────── */
  --focus: 0 0 0 2px rgba(232,98,42,0.22), 0 0 0 4px rgba(232,98,42,0.12);

  /* ── Glass ───────────────────────────────────────────────────────────── */
  --glass-bg:     rgba(14,11,8,0.75);
  --glass-border: rgba(255,255,255,0.05);
  --glass-blur:   blur(20px);
}

/* ── Light theme overrides ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #f5f2ee;
  --bg2:          #ffffff;
  --bg3:          #ebe7e1;
  --bg4:          #ddd8d0;
  --bg-hover:     rgba(0,0,0,0.03);
  --tx-primary:   #1a1510;
  --tx-body:      #2a2520;
  --tx-secondary: #5a5248;
  --tx-muted:     #7a7068;
  --tx-faint:     #a09888;
  --cream:        var(--tx-primary);
  --text:         var(--tx-body);
  --text2:        var(--tx-secondary);
  --muted:        var(--tx-muted);
  --border:       rgba(0,0,0,0.08);
  --border2:      rgba(0,0,0,0.13);
  --border3:      rgba(0,0,0,0.20);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 8px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-xl:    0 24px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
  --glow-orange:  0 0 40px rgba(232,98,42,0.06);
  --focus:        0 0 0 2px rgba(232,98,42,0.15), 0 0 0 4px rgba(232,98,42,0.08);
  --glass-bg:     rgba(255,255,255,0.82);
  --glass-border: rgba(0,0,0,0.06);
}