/* ============================================================================
   Ordre des calques CSS. Déclaré ici une fois, avant tout le reste.
   Un calque postérieur l'emporte sur un antérieur, quel que soit le poids
   des sélecteurs. C'est ce qui permet d'écrire des sélecteurs simples.
   ========================================================================= */
@layer reset, tokens, base, layout, components, utilities;

/* ============================================================================
   tokens.css — source de vérité unique.
   Tout ce que le mode Inspect affiche est lu ici à l'exécution.
   Ne jamais écrire une valeur de couleur, d'espacement ou de type ailleurs.
   ========================================================================= */

@layer tokens {
  /* --- Valeurs animables déclarées, pour pouvoir les interpoler ---------- */
  @property --wdth {
    syntax: '<number>';
    inherits: true;
    initial-value: 100;
  }
  @property --trait {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }

  :root {
    color-scheme: light dark;

    /* ======================================================================
       1. COULEUR
       Une rampe neutre, une teinte. Le nombre du token EST sa clarté OKLCH :
       --n-47 vaut oklch(47% …). Les deux thèmes ne sont pas deux palettes,
       ce sont deux affectations de rôles sur la même rampe.
       ==================================================================== */

    --hue-n: 254;
    --hue-signal: 266.3;

    --n-100: oklch(100%   0     var(--hue-n));
    --n-95:  oklch(95%    0.005 var(--hue-n));
    --n-89:  oklch(89%    0.008 var(--hue-n));
    --n-76:  oklch(76%    0.019 var(--hue-n));
    --n-60:  oklch(60%    0.020 var(--hue-n));
    --n-47:  oklch(47%    0.025 var(--hue-n));
    --n-31:  oklch(31%    0.021 var(--hue-n));
    --n-23:  oklch(23%    0.018 var(--hue-n));
    --n-19:  oklch(19%    0.016 var(--hue-n));

    --signal-46: oklch(46.4% 0.262 var(--hue-signal));
    --signal-73: oklch(73%   0.139 var(--hue-signal));

    /* Instrument. N'apparaît que dans le mode Inspect, jamais dans la page. */
    --measure: oklch(66.1% 0.245 1.9);

    /* --- Rôles ---------------------------------------------------------- */
    --canvas:    light-dark(var(--n-95),  var(--n-19));
    --surface:   light-dark(var(--n-100), var(--n-23));
    --ink:       light-dark(var(--n-19),  var(--n-95));
    --ink-muted: light-dark(var(--n-47),  var(--n-76));
    --rule:      light-dark(var(--n-89),  var(--n-31));
    --edge:      var(--n-60); /* seul pas qui tient ≥3:1 des deux côtés */
    --signal:    light-dark(var(--signal-46), var(--signal-73));

    /* ======================================================================
       2. TYPOGRAPHIE
       Une famille, trois rôles, différenciés par leurs axes variables.
       La chasse est une valeur du système, pas un effet de style.
       ==================================================================== */

    --face-text: 'Archivo Variable', ui-sans-serif, system-ui, sans-serif;
    --face-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', monospace;

    --wdth-display: 112;
    --wdth-text: 100;

    --wght-display: 600;
    --wght-text: 400;
    --wght-fort: 600;
    --wght-mono: 450;

    --t-display-xl: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
    --t-display-l:  clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
    --t-title:      clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
    --t-subtitle:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
    --t-body:       clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
    --t-small:      0.9375rem;
    --t-mono:       0.8125rem;

    --lh-display: 0.95;
    --lh-title:   1.12;
    --lh-body:    1.6;
    --lh-mono:    1.35;

    --ls-display: -0.022em;
    --ls-title:   -0.014em;
    --ls-body:    0em;
    --ls-mono:    0.06em;

    /* ======================================================================
       3. ESPACEMENT — base 4 px, échelle non linéaire assumée
       ==================================================================== */

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;

    /* ======================================================================
       4. MISE EN PAGE
       ==================================================================== */

    --rail-w: 15.5rem;
    --gutter: clamp(1.25rem, 3vw, 3.5rem);
    --planche-max: 52rem;   /* 832 px. Dicté par la résolution des sources :
                               à cette taille, un écran à densité double demande
                               1664 pixels réels, ce que les vignettes (Figma,
                               2400 px) et les héros (1800 px) fournissent. */
    --mesure: 68ch;         /* mesure de lecture des études de cas */
    --hair: 1px;

    /* ======================================================================
       5. MOUVEMENT — orchestration courte, jamais d'apparition au scroll
       ==================================================================== */

    --dur-1: 120ms;
    --dur-2: 220ms;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* ======================================================================
       6. FOCUS — jamais supprimé, jamais moins contrasté que ceci
       ==================================================================== */

    --focus-w: 2px;
    --focus-offset: 3px;
    --focus-color: var(--signal);
  }

  /* Le choix explicite l'emporte sur la préférence système, dans les deux sens. */
  :root[data-theme='light'] { color-scheme: light; }
  :root[data-theme='dark']  { color-scheme: dark; }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-1: 1ms;
      --dur-2: 1ms;
    }
  }
}