/* =============================================
   DESIGN TOKENS — Dark Minimal Tech
   "404.design" — palette & système complet
   ============================================= */
:root {

  /* ── PALETTE ──────────────────────────────
     Hiérarchie visuelle uniquement par
     typographie & spacing — jamais la couleur.
     Un seul accent autorisé : Electric Blue.  */
  --color-bg:           #0F0F0F; /* Carbon Black  — fond global */
  --color-surface:      #161616; /* Graphite       — cartes, inputs, panels */
  --color-hover:        #1E1E1E; /* Steel          — hover bg, focus states */
  --color-border:       #2A2A2A; /* Border Gray    — séparateurs, card borders */
  --color-accent:       #0EA5E9; /* Electric Blue  — CTA, liens, actifs */
  --color-accent-hover: #38BDF8; /* Electric Blue+ — hover CTA uniquement */
  --color-text:         #FFFFFF; /* Pure White     — titres H1, usage rare */
  --color-text-body:    #A3A3A3; /* Off White      — corps, descriptions, nav */
  --color-text-muted:   #525252; /* Muted Gray     — captions, dates, labels */
  --color-error:        #EF4444;
  --color-success:      #22C55E;

  /* ── TYPOGRAPHIE ──────────────────────────
     Contraste extrême de taille intentionnel.
     H1 96px face au label 11px — même section. */
  --font-heading: 'Syne', sans-serif;       /* 700–800 · display H1, logo */
  --font-body:    'DM Sans', sans-serif;    /* 300–500 · corps, nav, descriptions */
  --font-mono:    'Geist Mono', monospace;  /* 400–500 · chiffres, indices 01/02/03 */

  --text-label:  0.6875rem; /* 11px — labels uppercase seulement */
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.875rem;
  --text-4xl:    2.25rem;
  --text-hero:   clamp(3.5rem, 6vw, 6rem); /* 64–96px selon viewport */

  /* ── ESPACEMENT ─────────────────────────── */
  --space-1:  0.25rem;  --space-2:  0.5rem;
  --space-3:  0.75rem;  --space-4:  1rem;
  --space-6:  1.5rem;   --space-8:  2rem;
  --space-12: 3rem;     --space-16: 4rem;
  --space-24: 6rem;

  /* ── LAYOUT ─────────────────────────────── */
  --container-max: 1200px;
  --container-pad: var(--space-8);
  --nav-height:    60px;

  /* ── BORDURES — 6px maximum absolu ──────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-full: 9999px;

  /* ── OMBRE — une seule, subtile ──────────
     Zéro glow, zéro text-shadow.             */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);

  /* ── TRANSITIONS — 150ms ease-out partout ─ */
  --transition: 150ms ease-out;

  /* ── Z-INDEX ─────────────────────────────── */
  --z-below: -1;  --z-base: 0;    --z-above: 10;
  --z-overlay: 100; --z-modal: 200; --z-toast: 300;
}