/* ════════════════════════════════════════════════════════════════════════
   Helix Design System v4 — Design Tokens
   Source unique de vérité pour couleurs, espacements, typo, ombres, rayons.
   Aucune valeur "magique" ne doit exister ailleurs que dans ce fichier.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Couleurs de marque (Excel-Pro / Videotron) ───────────────────── */
  --c-brand-900: #0a2540;
  --c-brand-700: #123a63;
  --c-brand-500: #1b5e9c;
  --c-brand-300: #5b9bd5;
  --c-brand-100: #e7f0fa;

  --c-accent-600: #e6471d;   /* orange Videotron */
  --c-accent-500: #ff6b35;
  --c-accent-100: #ffe8df;

  /* ── Sémantique ───────────────────────────────────────────────────── */
  --c-success: #1f9d55;
  --c-warning: #d97706;
  --c-danger:  #dc2626;
  --c-info:    var(--c-brand-500);

  /* ── Surfaces & texte (mode clair) ────────────────────────────────── */
  --c-bg:        #f5f7fa;
  --c-surface:   #ffffff;
  --c-surface-2: #eef2f7;
  --c-border:    #d6dee8;
  --c-text:      #16202c;
  --c-text-soft: #5a6b7b;
  --c-text-inv:  #ffffff;

  /* ── Typographie ──────────────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;
  --lh-tight: 1.2; --lh-base: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ── Espacement (échelle 4px) ─────────────────────────────────────── */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-8: 3rem;    --sp-10: 4rem;

  /* ── Rayons / ombres / transitions ────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(16,32,44,.06), 0 1px 3px rgba(16,32,44,.10);
  --shadow-2: 0 4px 12px rgba(16,32,44,.10);
  --shadow-3: 0 12px 32px rgba(16,32,44,.16);
  /* Motion — tokens par tier (spec premium : fonction, jamais décoration) */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-micro: 150ms;   /* hover, focus, petites transitions */
  --dur-std:   250ms;   /* ouverture panneaux, toggles */
  --dur-complex: 450ms; /* séquences multi-éléments */
  --dur: var(--dur-micro); /* alias rétro-compat */

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container: 1120px;
  --header-h: 60px;
  --z-header: 100; --z-modal: 1000; --z-toast: 1100;
}

/* ── Mode sombre automatique ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:        #0d1520;
    --c-surface:   #15202e;
    --c-surface-2: #1d2c3d;
    --c-border:    #2a3b4f;
    --c-text:      #e7eef6;
    --c-text-soft: #9fb0c2;
    --c-brand-100: #16263a;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 12px rgba(0,0,0,.45);
    --shadow-3: 0 12px 32px rgba(0,0,0,.55);
  }
}