/* ════════════════════════════════════════════════════════════
   OB Studio Design System v1 - tokens.css
   Source : DESIGN_SYSTEM_OB_STUDIO_v1.md Partie 1
   Auteur : Olivier BLAISE / Cabinet LEVY
   Mission : P-TOKENS-UNIFY (chat 17)
   ════════════════════════════════════════════════════════════ */

:root {
  /* ──────────── COULEURS ──────────── */
  /* Coral (primaire CTA) */
  --coral:        #c0533a;
  --coral-dark:   #a8432c;
  --coral-light:  #e8a89c;
  --coral-bg:     rgba(192, 83, 58, 0.08);

  /* Gold (brand badge OB) */
  --gold:         #c9a84c;
  --gold-dark:    #a88a3c;
  --gold-bg:      rgba(201, 168, 76, 0.08);

  /* Noir (sidebar / texte fort) */
  --noir:         #0f1117;
  --noir-2:       #1a1d24;
  --noir-3:       #2a2e38;

  /* Sable (background admin / viewer) */
  --sable:        #f0ebe2;
  --sable-light:  #f8f5ef;

  /* Borders / Gris */
  --bord:         #ddd7cd;
  --bord-light:   #ebe8e2;
  --gris:         #7a7570;
  --gris-light:   #a09b95;
  --gris-dark:    #4a4640;

  /* ──────────── TYPOGRAPHIE ──────────── */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'Libre Baskerville', Georgia, serif;

  --fs-xs:        11px;   /* badges, hints */
  --fs-sm:        12px;   /* body secondary */
  --fs-md:        14px;   /* body primary ★ */
  --fs-lg:        16px;   /* H4, sous-titres */
  --fs-xl:        20px;   /* H3, sections */
  --fs-2xl:       28px;   /* H2, titres pages */
  --fs-hero:      36px;   /* H1, KPIs, hero */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  --lh-tight:     1.1;
  --lh-normal:    1.4;
  --lh-loose:     1.6;

  /* ──────────── ESPACEMENTS ──────────── */
  --sp-0:  2px;
  --sp-1:  4px;
  --sp-2:  8px;     /* gap dominant ★ */
  --sp-3:  12px;    /* padding boutons */
  --sp-4:  16px;    /* padding sections */
  --sp-5:  24px;    /* padding cartes */
  --sp-6:  32px;    /* padding hero */
  --sp-7:  48px;    /* espacement hero */
  --sp-8:  64px;    /* hero giant - rare */

  /* ──────────── BORDER-RADIUS ──────────── */
  --radius-sm:    6px;
  --radius-md:    8px;    /* dominant ★ */
  --radius-lg:    12px;
  --radius-xl:    16px;   /* hero cards */
  --radius-pill:  20px;
  --radius-full:  50%;

  /* ──────────── OMBRES ──────────── */
  --shadow-sm:    0 1px 2px rgba(15, 17, 23, 0.06);
  --shadow-md:    0 4px 12px rgba(15, 17, 23, 0.08);
  --shadow-lg:    0 8px 24px rgba(15, 17, 23, 0.12);
  --shadow-xl:    0 16px 48px rgba(15, 17, 23, 0.16);

  /* ──────────── TRANSITIONS ──────────── */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   400ms ease;

  /* ──────────── Z-INDEX ──────────── */
  --z-base:      1;
  --z-overlay:   100;
  --z-modal:     1000;
  --z-toast:     2000;
}