/* ==========================================================================
   KAGU — tokens.css
   Source de vérité du design system : couleurs (OKLCH), typo, espaces,
   rayons, mouvement. Aucune valeur brute ailleurs dans le projet.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Surfaces : le « plein » et le « creux » ---------------------- */
  --paper:    oklch(0.968 0.012 172);   /* fond de page, craie verte        */
  --surface:  oklch(0.994 0.004 172);   /* plein : cartes, boutons clairs   */
  --sunk:     oklch(0.928 0.018 176);   /* creux : champs, pistes, plaques  */
  --sunk-2:   oklch(0.884 0.022 178);   /* creux profond                    */
  --line:     oklch(0.850 0.020 180);   /* filets                           */

  /* ---- Encre ----------------------------------------------------------- */
  --ink:      oklch(0.235 0.045 195);   /* nuit sapin : texte, boutons, scène */
  --ink-2:    oklch(0.300 0.050 195);
  --ink-3:    oklch(0.380 0.052 195);
  --ink-deep: oklch(0.180 0.040 195);   /* fond du creux sur scène sombre   */
  --on-ink:   oklch(0.975 0.012 172);
  --on-ink-muted: oklch(0.800 0.030 185);
  --muted:    oklch(0.480 0.035 195);   /* texte secondaire sur clair       */

  /* ---- Signal unique : le vide ---------------------------------------- */
  --vide:     oklch(0.900 0.190 122);   /* « citron » = espace libre, rien d'autre */
  --vide-soft: oklch(0.900 0.190 122 / 0.22);
  --on-vide:  var(--ink);

  /* ---- États ------------------------------------------------------------ */
  --warn:     oklch(0.820 0.150 78);
  --alert:    oklch(0.520 0.190 28);
  --alert-soft: oklch(0.940 0.040 28);
  --focus-ring: var(--ink);

  /* ---- Matières (finitions des meubles) -------------------------------- */
  --m-chene:      oklch(0.780 0.075 78);
  --m-noyer:      oklch(0.450 0.065 55);
  --m-blanc:      oklch(0.950 0.008 100);
  --m-noir:       oklch(0.270 0.012 260);
  --m-sauge:      oklch(0.720 0.065 150);
  --m-terracotta: oklch(0.620 0.130 40);
  --m-petrole:    oklch(0.420 0.075 215);
  --m-argile:     oklch(0.800 0.060 35);
  --m-moutarde:   oklch(0.800 0.140 90);
  --m-beton:      oklch(0.700 0.010 240);

  /* ---- Typographie ------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.5rem + 6vw, 5.75rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  --fs-h3:      clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-num:     clamp(2rem, 1.4rem + 2.6vw, 2.75rem);   /* chiffres de cotes */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* ---- Espaces (base 4) -------------------------------------------------- */
  --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;

  /* ---- Rayons ---------------------------------------------------------- */
  --r-xs: 8px;  --r-s: 12px;  --r-m: 18px;  --r-l: 28px;  --r-pill: 999px;
  --notch: 52px;           /* taille de l'encoche des cartes               */
  --notch-r: 14px;         /* rayon intérieur de l'encoche                 */

  /* ---- Cibles tactiles -------------------------------------------------- */
  --hit: 44px;
  --hit-lg: 52px;

  /* ---- Relief ----------------------------------------------------------- */
  --recess: inset 0 2px 0 oklch(0.25 0.05 195 / 0.07), inset 0 8px 14px -8px oklch(0.25 0.05 195 / 0.20);
  --recess-dark: inset 0 14px 28px -10px oklch(0.10 0.03 195 / 0.75), inset 0 0 0 1px oklch(1 0 0 / 0.05);
  --lift: 0 1px 0 oklch(0.2 0.05 195 / 0.06), 0 18px 40px -16px oklch(0.2 0.05 195 / 0.38);

  /* ---- Mouvement -------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);       /* arriver, révéler    */
  --ease-dock: cubic-bezier(0.3, 1.35, 0.5, 1);      /* emboîter (léger dépassement) */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);      /* redimensionner      */
  --d-instant: 90ms;
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 420ms;
  --d-dock: 600ms;

  /* ---- Mise en page ----------------------------------------------------- */
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2rem);
  --maxw: 1480px;
}

/* Sur fond d'encre, l'anneau de focus passe au signal. */
.on-dark { --focus-ring: var(--vide); color: var(--on-ink); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-dock: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Typographie utilitaire ---------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); font-weight: 800; font-stretch: 78%; line-height: 0.94; letter-spacing: -0.006em; }
.t-h1      { font-size: var(--fs-h1);      font-weight: 750; font-stretch: 80%; line-height: 1; letter-spacing: -0.005em; }
.t-h2      { font-size: var(--fs-h2);      font-weight: 700; font-stretch: 85%; line-height: 1.05; letter-spacing: -0.01em; }
.t-h3      { font-size: var(--fs-h3);      font-weight: 650; font-stretch: 92%; line-height: 1.15; }
.t-num     { font-size: var(--fs-num);     font-weight: 700; font-stretch: 80%; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-body    { font-size: var(--fs-body); text-wrap: pretty; }
.t-small   { font-size: var(--fs-small); text-wrap: pretty; }
.t-micro, .t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.is-muted { color: var(--muted); }
.on-dark .is-muted { color: var(--on-ink-muted); }

/* Surligneur « vide » : seule utilisation décorative du signal. */
.mark-vide {
  background: linear-gradient(transparent 12%, var(--vide) 12%, var(--vide) 92%, transparent 92%);
  padding: 0 0.12em;
  margin: 0 -0.12em;
  border-radius: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--ink);
}

html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { .shot__line { display: none; } }