/* ═══════════════════════════════════════════════════════════════════════
   NILINK ATELIER · DESIGN SYSTEM (tokens)
   Une seule source de vérité visuelle. Le thème n'utilise JAMAIS une
   couleur ou une taille en dur : tout passe par ces variables, et chaque
   drop pourra surcharger --accent et --drop-* sans toucher au reste.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ── Palette NILINK (décisions définitives du master prompt) ───────── */
  --ink:        #080808;   /* noir profond : le fond du monde NILINK      */
  --ink-2:      #151515;   /* noir secondaire : surfaces, panneaux        */
  --bone:       #F5F3EF;   /* blanc cassé : texte, lumière                */
  --steel:      #858585;   /* gris métal : texte secondaire, légendes     */
  --red:        #D71920;   /* rouge NILINK : ACCENT STRICT (voir règle)   */

  /* Dérivés calmes, jamais de nouvelles couleurs arbitraires */
  --bone-60:    rgba(245, 243, 239, 0.60);
  --bone-24:    rgba(245, 243, 239, 0.24);
  --line:       rgba(245, 243, 239, 0.14);   /* filets 1px                */
  --line-strong:rgba(245, 243, 239, 0.32);

  /* RÈGLE DU ROUGE : réservé aux numéros collectors, aux états
     (authentique, vendu), au soulignement actif et à UN accent par
     écran. Jamais en fond de section, jamais en décor.                   */
  --accent:     var(--red);

  /* ── Identité par drop (surchargée par le plugin via inline style) ─── */
  --drop-accent:   var(--accent);
  --drop-surface:  var(--ink-2);

  /* ── Typographie ───────────────────────────────────────────────────── */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Consolas", monospace;

  /* Échelle éditoriale : les titres sont des COMPOSITIONS, pas des h2
     gonflés. Clamp = même intention du 360px au 1920px.                  */
  --t-colossal: clamp(3.4rem, 14vw, 11.5rem);  /* NILINK, titres manifeste */
  --t-display:  clamp(2.2rem, 6.5vw, 4.8rem);  /* titres de section        */
  --t-title:    clamp(1.35rem, 2.6vw, 2rem);   /* sous-titres              */
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-label:    0.6875rem;                      /* légendes mono uppercase */

  --w-display:  125%;   /* Archivo étiré : la voix streetwear de NILINK   */
  --w-condensed: 76%;   /* contrepoint condensé pour les contrastes       */

  /* ── Espace ────────────────────────────────────────────────────────── */
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);
  --section-y:   clamp(5rem, 12vh, 10rem);
  --frame:       1680px;

  /* ── Mouvement (voir .reveal dans main.css) ────────────────────────── */
  --ease-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-cine:   cubic-bezier(0.65, 0, 0.15, 1);
  --dur-fast:    240ms;
  --dur-base:    520ms;
  --dur-slow:    900ms;

  color-scheme: dark;
}

/* Réduction de mouvement : on coupe TOUT le décoratif, on garde le
   fonctionnel. Un seul endroit, pas un patch par animation.              */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}