/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS — modifiez ces variables pour changer l'identité visuelle.
   Trois voix typographiques : serif léger (émotion), sans (interface), mono (étiquettes et données).
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/newsreader-latin-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/roboto-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/roboto-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  /* Surfaces (la profondeur vient des paliers de couleur, pas des ombres) */
  --color-obsidian: #0f1011;   /* fond de page */
  --color-abyss: #090a0b;      /* sections alternées */
  --color-graphite: #2e2e2e;   /* cartes surélevées */
  --color-carbon: #19191a;     /* cartes discrètes */
  --color-steel: #3f4041;      /* survol */
  --color-silver: #cacaca;     /* carte inversée (1-2 par page max.) */

  /* Texte */
  --color-pure: #ffffff;       /* texte principal, bouton principal */
  --color-cloud: #f5f5f7;      /* grands titres */
  --color-ash: #9f9fa0;        /* descriptions */
  --color-fog: #6a6b6b;        /* texte atténué */
  --color-void: #000000;
  --color-line: rgba(255, 255, 255, 0.1);
  --color-line-strong: rgba(255, 255, 255, 0.22);
  --color-glass: rgba(255, 255, 255, 0.08);

  /* Couleurs de tuiles (uniquement en aplat sur les tuiles de catégorie) */
  --tile-iris: #847dff;
  --tile-pale-iris: #d1c9ff;
  --tile-deep-iris: #4b49aa;
  --tile-orchid: #dd90d8;
  --tile-periwinkle: #90b8f0;
  --color-signal: #00b3dd;     /* données : courbes, indicateurs */

  --color-danger: #ff6b6b;
  --color-success: #5fd4a0;

  /* Typographie */
  --font-serif: 'Newsreader Variable', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-mono: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-sub: 18px;
  --text-h3: clamp(28px, 3vw, 38px);
  --text-h2: clamp(40px, 6vw, 80px);
  --text-display: clamp(48px, 8vw, 96px);

  /* Espacements (base 4 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-25: 100px;
  --space-30: 120px;
  --section-gap: clamp(80px, 10vw, 140px);

  /* Mise en page */
  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Rayons */
  --radius-sm: 8px;    /* boutons, champs, navigation */
  --radius-md: 16px;   /* cartes */
  --radius-lg: 30px;   /* tuiles de catégorie, grandes cartes */
  --radius-pill: 9999px;

  /* Mouvement : transitions courtes et sobres, révélations lentes */
  --ease: ease;
  --ease-reveal: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.6s;
  --dur-reveal: 1s;
  --dur-atmo: 2.5s;
}