/* ==========================================================================
   tokens.css — Cuivre rev. 2, single source of truth (R-TECH-03).
   Every colour, font and measurement used anywhere on the site is defined
   here, once. No component may hard-code a colour or a font-family.
   Lifted from design-directions.html, .cuivre scope.
   ========================================================================== */

/* --- DM Sans, self-hosted, variable (400–700 in one file per subset) ------
   Google serves the same woff2 for weights 400/500/700 — it is the variable
   font. Two files instead of six, and the browser only fetches latin-ext
   when an accented character actually needs it. (R-PERF-01)                */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Colour (PRD §6.1) ------------------------------------------------ */
  --papier: #f1f0eb;        /* main ground                                  */
  --surface: #fbfaf7;       /* cards, alternate sections                    */
  --cuivre: #a85a31;        /* accent — CTAs, links, live wire              */
  --cuivre-clair: #c98253;  /* live states on dark, the pulse               */
  --plaque: #1c1714;        /* the plate. the only dark object.             */
  --encre: #191410;         /* headlines, body                              */
  --doux: #4a423b;          /* sub-headlines, running text (R-DS-01)        */
  /* PRD §6.1 specifies #8A8177, which measures 3.41:1 on --papier and fails
     the 4.5:1 of R-A11Y-01 for any text, captions included. Darkened to
     4.87:1 with Oussama's approval, 2026-08-29. */
  --discret: #6f675e;       /* labels, captions — never body text           */
  --ligne: #dedad1;         /* borders, rules                               */

  /* Copper as *text* on papier measures 4.41:1 — just under the 4.5:1 that
     R-A11Y-01 requires, and R-A11Y-01 names this pair specifically. The brand
     fill stays exactly --cuivre; only copper type uses this darker variant,
     which measures 4.85:1 and is visually indistinguishable at text sizes. */
  --cuivre-texte: #a0542c;

  /* Derived. Only ever used inside the plate or on hover states.           */
  --grille: rgba(26, 22, 19, 0.055);   /* the 26px hero grid                */
  --ligne-forte: #d2cbc1;              /* ghost button border               */
  --ligne-survol: #cbbfb2;             /* card border on hover              */
  --plaque-bord: #2e2621;
  --plaque-rule: #2a2320;
  --plaque-node: #262019;
  --plaque-node-bord: #362d26;
  --plaque-texte: #e5dbd0;
  --plaque-texte-vif: #fff1e7;
  --plaque-discret: #9a8f84;
  --plaque-puce: #6f6257;
  --plaque-fil: #3b322b;
  --sur-cuivre: #fff7f2;               /* text on a copper fill             */

  /* --- Typography (PRD §6.2) -------------------------------------------- */
  --police: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-h1: 53px;
  --t-h1-mobile: 34px;
  --t-h2: 32px;
  --t-h3: 20px;
  --t-corps: 16.5px;
  --t-petit: 14.5px;
  --t-menu: 13.5px;
  --t-note: 12.5px;
  --t-label: 10.5px;
  --t-stat: 29px;

  --suivi-h1: -2.1px;
  --suivi-h2: -1.3px;
  --suivi-h3: -0.4px;
  --suivi-label: 0.2em;
  --suivi-mot: -0.035em;   /* the wordmark (R-DS-10)                        */

  --gras-titre: 500;       /* headlines are 500, never 700 (R-DS-02)        */
  --gras-corps: 400;
  --gras-mot: 700;         /* the wordmark, and nothing else                */

  --interligne-titre: 1.03;
  --interligne-corps: 1.58;

  /* --- Layout ----------------------------------------------------------- */
  --largeur: 1080px;       /* page container                                */
  --largeur-texte: 46ch;   /* hero sub-line                                 */
  --largeur-plate: 660px;
  --marge: 24px;           /* gutter on mobile                              */
  --grille-pas: 26px;      /* the hero grid square (PRD §6.3)               */
  --cible: 44px;           /* minimum touch target (R-A11Y-04)              */

  /* --- Shape ------------------------------------------------------------ */
  --r-pilule: 999px;
  --r-carte: 10px;
  --r-plate: 12px;
  --r-node: 6px;

  --ombre-cta: 0 1px 2px rgba(168, 90, 49, 0.24), 0 8px 20px rgba(168, 90, 49, 0.18);
  --ombre-cta-survol: 0 2px 4px rgba(168, 90, 49, 0.26), 0 12px 26px rgba(168, 90, 49, 0.24);
  --ombre-plate: 0 2px 4px rgba(25, 20, 16, 0.12), 0 22px 50px rgba(25, 20, 16, 0.2);

  /* --- Motion -----------------------------------------------------------
     The site has exactly one animation (R-DS-06). These durations serve it
     and the three permitted micro-interactions (R-DS-07).                  */
  --transition: 0.16s ease;
  --transition-lien: 0.15s ease;
  --courant: 1s;           /* copper current crossing the plate, once       */
}