/* =============================================================================
   TOKENS — Collectif TKND
   =============================================================================
   Ce fichier ne contient QUE le bloc :root. Aucune règle, aucun sélecteur,
   aucune media query. C'est ce qui permet de le lire d'un coup d'œil et de
   diffé un changement de design system sans le noyer dans du layout.

   Conséquence assumée : les @font-face et la neutralisation
   prefers-reduced-motion vivent dans style.css, pas ici.

   RÈGLE DURE (AGENTS.md §1, non-négociable n°5) : aucune couleur ni police
   codée en dur ailleurs dans le projet. Un # hexadécimal hors de ce fichier
   est un bug — seule exception, les deux SVG dérivés du logo, qui sont des
   assets et non des feuilles de style.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COULEURS
     Palette stricte rouge / noir / blanc imposée par la charte.
     Aucune autre couleur, jamais.
     --------------------------------------------------------------------- */

  /* Rouge des aplats et des fonds de section (rouge de la maquette XD).
     ⚠️ NE JAMAIS utiliser comme couleur de texte sur fond noir : 2,7:1,
     très en dessous du minimum accessible de 4,5:1. Voir --accent-text. */
  --accent: #a80203;

  /* Rouge du texte sur fond noir, et rien d'autre (rouge vif de la charte).
     5,25:1 sur noir : passe le seuil AA. C'est ce qui résout le conflit
     entre les deux rouges des sources — ils ont des rôles distincts. */
  --accent-text: #ff0000;

  --bg-dark: #000000;
  --bg-light: #ffffff;

  /* Bandeau papier du header.
     ⚠️ PLACEHOLDER ASSUMÉ, pas un choix de DA. La maquette demande un papier
     texturé ; aucun asset de texture n'a été livré et on ne fabrique pas
     d'images. Point d'insertion de la future texture : voir le commentaire
     « TEXTURE PAPIER » dans style.css. */
  --paper-bg: #f4f1ea;

  /* Noir à 16 % — ombres portées de la maquette. */
  --shadow: #00000029;

  /* Rôles dérivés : on nomme l'usage, pas la couleur. Ça évite d'avoir à
     rechercher « qui utilise --bg-light » le jour d'un changement de palette. */
  --text-on-dark: var(--bg-light);
  --text-on-light: var(--bg-dark);
  --text-on-accent: var(--bg-light); /* blanc sur rouge : 7,9:1 */

  /* ---------------------------------------------------------------------
     TYPOGRAPHIE
     Substituts des polices de la charte (Extenda 60 Giga / Rugrats Sans),
     inutilisables sur le web car sous licence Canva. Voir AGENTS.md §5.
     Le jour où la licence webfont Extenda est achetée, la bascule se fait
     ICI, sur une ligne — d'où l'obligation de garder les titres en texte HTML.
     --------------------------------------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Échelle typographique. Les bornes hautes reprennent les paliers relevés
     dans la maquette XD (20 / 25 / 30 / 40 / 50 / 100 px en 1920).
     clamp() car aucune maquette mobile n'existe : plutôt qu'inventer des
     paliers, on laisse la taille fluer entre un minimum lisible et la valeur
     de la maquette. À revoir quand les maquettes mobiles arriveront. */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* surtitres, mentions */
  --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);  /* légendes, footer */
  --fs-base: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);     /* corps — 20px */
  --fs-md: clamp(1.125rem, 1rem + 0.6vw, 1.5625rem);    /* chapô — 25px */
  --fs-lg: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);     /* 30px */
  --fs-xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);      /* 40px */
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.125rem);      /* titres — 50px */
  --fs-3xl: clamp(2.75rem, 1rem + 7vw, 6.25rem);        /* accroches — 100px */

  /* Interlignage serré de la maquette (~1.2) pour les titres,
     confortable pour le corps : un texte de bio à 1.2 est illisible. */
  --lh-tight: 1.1;
  --lh-title: 1.2;
  --lh-body: 1.6;

  /* letter-spacing : 1.5px relevé dans la maquette sur le corps.
     --tracking-wide sert la signature « NOS » en petites capitales espacées. */
  --tracking-tight: 0.01em;
  --tracking-body: 0.06em;
  --tracking-wide: 0.35em;

  --fw-body: 300; /* Inter Light — c'est la graisse de la maquette */

  /* ---------------------------------------------------------------------
     ESPACEMENTS
     Tous en clamp() : la maquette est en 1920 fixe, le site ne l'est pas.
     --------------------------------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-sm: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  --space-lg: clamp(2rem, 1.5rem + 2vw, 4rem);
  --space-xl: clamp(3rem, 2rem + 3.5vw, 6rem);
  --space-2xl: clamp(4rem, 2.5rem + 5vw, 8rem);
  --space-3xl: clamp(5rem, 3rem + 7vw, 11rem);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container: 1440px;      /* la maquette est en 1920, marges comprises */
  --container-narrow: 900px; /* blocs de texte long : au-delà, la ligne fatigue */
  --gutter: var(--space-md);
  --header-h: clamp(4.5rem, 4rem + 2vw, 6.5rem);

  /* ---------------------------------------------------------------------
     RAYONS, OMBRES, TRANSITIONS
     La DA est brute et anguleuse : les rayons restent minimes, et les
     éléments de type « collage » n'en ont aucun.
     --------------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-sm: 0 2px 6px var(--shadow);
  --shadow-md: 0 6px 20px var(--shadow);

  /* Neutralisées en bloc sous prefers-reduced-motion (dans style.css) :
     un seul endroit à couper plutôt qu'une chasse aux transitions. */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast: var(--duration-fast) var(--ease);
  --transition-base: var(--duration-base) var(--ease);
  --transition-slow: var(--duration-slow) var(--ease);

  /* Décalage du texte derrière le vinyle sur la landing : l'animation doit
     être SÉQUENCÉE, pas simultanée (AGENTS.md §5). */
  --stagger: 260ms;

  /* ---------------------------------------------------------------------
     FOCUS
     Épaisseur volontairement généreuse : le focus doit rester visible sur
     les trois fonds de la palette.
     --------------------------------------------------------------------- */
  --focus-width: 3px;
  --focus-offset: 3px;
  --z-skip-link: 100;
  --z-header: 50;
}