/* WAW, tokens en trois couches.
   1. Primitifs : valeurs brutes de la charte et des échelles.
   2. Sémantiques : rôles (surface, texte, filet, élément allumé).
   3. Composants : valeurs propres à un composant. */

@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/noto-serif-display-300.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/noto-serif-display-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-serif-display-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"), url("../fonts/archivo-var.woff2") format("woff2");
}

:root {
  /* 1. Primitifs : couleur (charte WAW : grège, bordeaux, noir) */
  --c-greige-500: #beb3a4;
  --c-greige-400: #cbc2b5;
  --c-greige-600: #a99d8c;
  --c-paper-100: #f3f3f1;
  --c-paper-50: #fafaf9;
  --c-white: #ffffff;
  --c-ink-900: #121110;
  --c-ink-700: #3b3631;
  --c-ink-500: #5a534b;
  --c-oxblood-600: #550000;
  --c-oxblood-800: #3d0000;

  /* 1. Primitifs : typographie */
  --f-serif: "Noto Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --w-serif-small: 500; /* sous 26 px, les déliés du dessin Display ont besoin de matière */

  --t-display: clamp(2.5rem, 1.3rem + 4.2vw, 5.75rem);
  --t-h2: clamp(2rem, 1.25rem + 2.5vw, 3.75rem);
  --t-h3: clamp(1.375rem, 1.1rem + 0.85vw, 1.875rem);
  --t-h2-small: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); /* titres moyens : accroche de l'équipe, intertitres d'article, fiches The Drop */
  --t-lead: clamp(1.0625rem, 0.98rem + 0.32vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* 1. Primitifs : espacement (base 4 px, échelle géométrique douce) */
  --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: 4.5rem;
  --s-9: clamp(4.5rem, 3rem + 5vw, 8rem);
  --s-10: clamp(6rem, 3.5rem + 8vw, 12rem);

  /* 1. Primitifs : mouvement */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-press: 140ms;
  --d-hover: 200ms;
  --d-base: 360ms;
  --d-draw: 1200ms;

  /* 1. Primitifs : grille */
  --g-margin: clamp(1.25rem, 4.5vw, 4.5rem);
  --g-gutter: clamp(1rem, 2vw, 2rem);
  --g-max: 96rem;

  /* 2. Sémantiques */
  --surface-cover: var(--c-greige-400); /* un cran plus clair que le grège de la charte, à la demande de WAW */
  --surface-sheet: var(--c-paper-100);
  --surface-field: var(--c-paper-50);
  --surface-field-focus: var(--c-white);
  --text: var(--c-ink-900);
  --text-muted: var(--c-ink-500);
  --text-muted-on-cover: var(--c-ink-700);
  --lit: var(--c-oxblood-600);
  --lit-pressed: var(--c-oxblood-800);
  --rule-w: 1px;
  --rule: color-mix(in srgb, var(--c-ink-900) 40%, transparent);
  --rule-on-cover: color-mix(in srgb, var(--c-ink-900) 55%, transparent);
  --rule-strong: var(--c-ink-900);
  --focus: var(--c-oxblood-600);

  /* Surface encre : un seul aplat par page, la fermeture (étape suivante et pied). */
  --surface-ink: var(--c-ink-900);
  --text-on-ink: var(--c-paper-100);
  --text-muted-on-ink: color-mix(in srgb, var(--c-paper-100) 72%, var(--c-ink-900));
  --rule-on-ink: color-mix(in srgb, var(--c-paper-100) 30%, transparent);
  --lit-on-ink: var(--c-greige-500); /* le bordeaux ne se lit pas sur l'encre (1,6:1) */
  /* 3. Composants */
  --tracker-h: 4rem;
  --tracker-sub-h: 2.75rem;
  --logo-h: 1.0625rem;
  --btn-h: 3.25rem;
  --btn-pad: 1.5rem;
  --btn-bg: var(--c-ink-900);
  --btn-fg: var(--c-paper-100);
  --btn-bg-hover: var(--lit);
  --btn-ink-bg: var(--c-paper-100);
  --btn-ink-fg: var(--c-ink-900);
  --btn-ink-bg-hover: var(--c-greige-500);
  --field-h: 3.25rem;
  /* Reflet du verre, repli sans WebGL (dégradé immobile) : grenat sur la feuille, bordeaux sur l'encre. */
  --reflet-fallback-sheet: rgb(128 13 26 / 0.07);
  --reflet-fallback-ink: rgb(102 8 20 / 0.38);
  --field-border: color-mix(in srgb, var(--c-ink-900) 52%, transparent);
}