/* ==========================================================================
   AMO STUDIO — Design tokens
   Concept « Ardent » : Liège, la Cité ardente. Fond d'acier, encre craie,
   un seul accent incandescent. Toutes les valeurs du site passent par ici.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Même fichier, mais texte masqué jusqu'au chargement (≤ 3 s) : le compteur du préchargement
   ne saute pas quand la police remplace celle de secours. Aucun téléchargement supplémentaire. */
@font-face {
  font-family: "Schibsted Grotesk Block";
  src: url("../assets/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* --- Couleurs de base (primitives) --- */
  --acier: #0e1013;          /* fond principal : acier sombre */
  --calamine: #16191e;       /* surface : un cran plus clair */
  --calamine-2: #1f232a;     /* surface 2 : cadres, coques d'appareils */
  --craie: #e9ebee;          /* encre sur fond sombre : blanc d’acier, neutre */
  --gris-acier: #9ea4ad;     /* texte secondaire sur fond sombre (7:1) */
  --acier-poli: #e3e5e8;     /* champ clair (chapitre « services ») */
  --acier-poli-2: #d5d8dc;   /* surface sur champ clair */
  --encre-2: #474d57;        /* texte secondaire sur champ clair (6,7:1) */
  --incandescent: #ff5b1f;   /* l'accent unique : action, curseur, chaleur */
  --incandescent-vif: #ff7a3d;
  --braise: #b0360b;         /* accent lisible sur champ clair (4,9:1) */

  /* --- Rôles (sémantique) — redéfinis par chapitre via [data-field] --- */
  --bg: var(--acier);
  --surface: var(--calamine);
  --ink: var(--craie);
  --muted: var(--gris-acier);
  --accent: var(--incandescent);
  --accent-ink: var(--acier);      /* texte posé sur l'accent (6:1) */
  --accent-text: var(--incandescent); /* accent utilisé comme couleur de texte */

  /* --- Typographie : une seule famille, cinq tailles --- */
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14 px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19 px */
  --step-lead: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);      /* 20–28 px : énoncés */
  --step-head: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);         /* 36–72 px : titres de section */
  --step-poster: clamp(3.25rem, 0.8rem + 10.5vw, 10.5rem);     /* grands mots « affiche » */
  /* Le nom-monument : « Decloux » ≈ 3,77 em = 92 % de la largeur, mais jamais plus haut que l'écran ne le permet. */

  --lh-tight: 0.86;
  --lh-head: 1;
  --lh-text: 1.55;
  --track-display: -0.055em;
  --track-head: -0.035em;
  --track-text: -0.005em;

  /* --- Espace --- */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);     /* marges de page et gouttières */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --section: clamp(5rem, 2rem + 8.5vw, 10.5rem);   /* écart entre sections */
  --measure: 62ch;
  --header-h: 4.5rem;

  /* --- Mouvement (courbes et durées) --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 260ms;
  --t-reveal: 900ms;

  /* --- Divers --- */
  --radius-device: 3.1rem;   /* coins des téléphones (les médias restent carrés) */
  --z-header: 50;
  --z-cursor: 90;
  --z-overlay: 80;
  --z-preloader: 100;

  color-scheme: dark;
}

/* Chapitres : chaque section déclare son champ de couleur, l'en-tête suit l'encre. */
[data-field="clair"] {
  --bg: var(--acier-poli);
  --surface: var(--acier-poli-2);
  --ink: var(--acier);
  --muted: var(--encre-2);
  --accent-text: var(--braise);
  color-scheme: light;
}
[data-field="incandescent"] {
  --bg: var(--incandescent);
  --surface: #ff6d34;
  --ink: var(--acier);
  --muted: #3a1206;
  --accent: var(--acier);
  --accent-ink: var(--craie);
  --accent-text: var(--acier);
  color-scheme: light;
}