/* ==========================================================================
   DESIGN TOKENS — Joey Gouez / jogouez-stream.ovh
   Palette strictement Noir / Blanc / Gris. Aucun accent couleur.
   ========================================================================== */

:root {
  /* Couleurs */
  --color-bg: #0a0a0b;
  --color-bg-alt: #111113;
  --color-surface: #17171a;
  --color-surface-2: #1f1f23;
  --color-border: #2b2b30;
  --color-border-strong: #3d3d44;
  --color-text: #f2f2f0;
  --color-text-dim: #b4b4b8;
  --color-text-faint: #7a7a80;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typographie */
  --font-display: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-2xs: 0.6875rem;   /* 11px — labels */
  --fs-xs: 0.8125rem;    /* 13px */
  --fs-sm: 0.9375rem;    /* 15px */
  --fs-base: 1.0625rem;  /* 17px */
  --fs-lg: 1.375rem;     /* 22px */
  --fs-xl: 2rem;         /* 32px */
  --fs-2xl: 3.25rem;     /* 52px */
  --fs-3xl: 5.5rem;      /* 88px */
  --fs-hero: clamp(3rem, 9vw, 8rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --ls-wide: 0.18em;
  --ls-wider: 0.3em;

  /* Espacements (échelle 8px) */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6rem;
  --sp-9: 9rem;
  --sp-10: 12rem;

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* Z-index */
  --z-nav: 100;
  --z-menu: 200;
  --z-cursor: 300;
}

@media (max-width: 640px) {
  :root {
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 7rem;
  }
}