/* ═══════════════════════════════════════════════════════
   SENVIRTUEL v2 — Design Tokens
   Source of truth : toutes les valeurs viennent d'ici
═══════════════════════════════════════════════════════ */
:root {

  /* ── Couleurs de fond ── */
  --bg:        #0c0e16;
  --bg-2:      #10121b;
  --surface:   #161923;
  --surface-2: #1c2030;
  --surface-3: #242840;

  /* ── Bordures ── */
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);

  /* ── Texte ── */
  --txt-1: #f0f2ff;
  --txt-2: #9096b4;
  --txt-3: #565a78;

  /* ── Primaire (Indigo) ── */
  --primary:       #6366f1;
  --primary-hover: #4f52d6;
  --primary-glow:  rgba(99,102,241,0.25);
  --primary-soft:  rgba(99,102,241,0.12);

  /* ── Accent (Cyan) ── */
  --accent:      #22d3ee;
  --accent-soft: rgba(34,211,238,0.12);

  /* ── Statuts ── */
  --success:      #10b981;
  --success-soft: rgba(16,185,129,0.12);
  --warning:      #f59e0b;
  --warning-soft: rgba(245,158,11,0.12);
  --danger:       #ef4444;
  --danger-soft:  rgba(239,68,68,0.12);
  --info:         #3b82f6;
  --info-soft:    rgba(59,130,246,0.12);

  /* ── Marques produits ── */
  --netflix:  #e50914;
  --spotify:  #1db954;
  --youtube:  #ff0000;
  --disney:   #113ccf;
  --xbox:     #107c10;
  --psn:      #003791;
  --adobe:    #ff0000;
  --canva:    #00c4cc;

  /* ── Typographie ── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Tailles de police ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;

  /* ── Espacement ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Border radius ── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-primary: 0 4px 20px var(--primary-glow);

  /* ── Transitions ── */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;

  /* ── Layout ── */
  --promo-offset: 40px;
  --header-h:  64px;
  --catbar-h:  44px;
  --sidebar-w: 240px;
  --max-w:     1280px;
  --content-pad: max(16px, calc((100% - var(--max-w)) / 2));

  /* ── Z-index ── */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;
}

/* Dark mode (déjà dark par défaut) */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f4f6fb;
    --bg-2:      #eef0f7;
    --surface:   #ffffff;
    --surface-2: #f0f2fa;
    --surface-3: #e4e8f5;
    --border:    rgba(0,0,0,0.08);
    --border-2:  rgba(0,0,0,0.14);
    --txt-1: #0f1123;
    --txt-2: #4b5068;
    --txt-3: #9096b4;
  }
}
/* Force dark (préférence site) */
[data-theme="dark"] {
  --bg:        #0c0e16;
  --bg-2:      #10121b;
  --surface:   #161923;
  --surface-2: #1c2030;
  --surface-3: #242840;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);
  --txt-1: #f0f2ff;
  --txt-2: #9096b4;
  --txt-3: #565a78;
}