/* Hallmark · tokens · theme: studied-DNA (source: pletor.ai) adaptée
 * paper oklch(91% 0 0) gris papier neutre · accent oklch(45% 0.29 266) outremer
 * Archivo ExtraBold élargi (titres) · Archivo (texte) · IBM Plex Mono (petites étiquettes)
 * axes: light / grotesk-sans / cool
 */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/Archivo-vf.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

:root {
  /* neutres, chroma 0 : aucun reflet bleu */
  --color-papier: oklch(91% 0 0);
  --color-papier-2: oklch(87% 0 0);
  /* texture papier : feuille un peu plus claire, grain un peu plus sombre, moyenne = --color-papier */
  --color-papier-texture: oklch(93.6% 0 0);
  --color-papier-ombre: oklch(74% 0 0);
  --color-feuille: oklch(99% 0 0);
  /* feuille blanche qui laisse passer le grain du papier peint derrière */
  --color-feuille-papier: oklch(99% 0 0 / 0.7);
  /* panneaux gris posés sur la feuille : une teinte, pas un aplat, pour garder le grain */
  --color-teinte-papier: oklch(22% 0 0 / 0.07);
  --color-teinte-papier-forte: oklch(22% 0 0 / 0.11);
  --color-blanc: oklch(100% 0 0);
  --color-encre: oklch(22% 0 0);
  --color-texte-2: oklch(42% 0 0);
  --color-nuit: oklch(22% 0 0);
  --color-nuit-2: oklch(26.8% 0 0);
  --color-texte-nuit: oklch(98% 0 0);
  --color-texte-nuit-2: oklch(78% 0 0);
  --color-filet: oklch(22% 0 0 / 0.1);
  --color-filet-fort: oklch(22% 0 0 / 0.22);
  --color-voile: oklch(22% 0 0 / 0.08);
  --color-voile-fort: oklch(22% 0 0 / 0.6);
  --color-filet-nuit: oklch(100% 0 0 / 0.14);
  --color-filet-nuit-fort: oklch(100% 0 0 / 0.24);
  --color-verre: oklch(82% 0 0 / 0.58);
  --color-verre-clair: oklch(100% 0 0 / 0.62);
  --color-verre-bord: oklch(100% 0 0 / 0.4);
  --color-ombre: oklch(0% 0 0 / 0.2);
  --color-ombre-proche: oklch(0% 0 0 / 0.06);
  --color-ombre-carte: oklch(0% 0 0 / 0.45);
  --color-verre-nav: oklch(91% 0 0 / 0.62);
  --color-bord-vig: oklch(88% 0 0);
  --color-champ: oklch(93% 0 0);
  --color-voile-nuit: oklch(100% 0 0 / 0.04);
  --color-voile-noir: oklch(0% 0 0 / 0.38);
  /* ruban des réalisations : le sol quadrillé en perspective, sur la nuit */
  --color-grille-sol: oklch(100% 0 0 / 0.42);
  --color-grille-fond: oklch(100% 0 0 / 0.06);
  --color-nuit-transparente: oklch(22% 0 0 / 0);
  --color-nuit-voile: oklch(22% 0 0 / 0.72);
  --color-nuit-voile-fort: oklch(22% 0 0 / 0.96);
  --color-carre-survol: oklch(76% 0 0);
  --color-carre-repos-carte: oklch(88% 0 0);

  /* le bleu */
  --color-bleu: oklch(45% 0.29 266);
  --color-bleu-presse: oklch(39% 0.25 266);
  --color-bleu-sur-nuit: oklch(74% 0.13 266);
  --color-bleu-carre-nuit: oklch(60% 0.22 266);
  /* graphique de la preuve, validés sur --color-nuit-2 (bande 0.48 à 0.67, contraste 3:1) */
  --color-barre-nielia: oklch(63% 0.19 266);
  --color-barre-autre: oklch(58% 0 0);

  /* métal, les deux étiquettes de prix et la tuile Motion */
  --color-metal-clair: oklch(95% 0 0);
  --color-metal: oklch(90% 0 0);
  --color-metal-sombre: oklch(84% 0 0);
  --metal: linear-gradient(115deg, var(--color-metal) 0%, var(--color-metal-clair) 30%, var(--color-metal) 58%, var(--color-metal-sombre) 100%);

  --color-focus: var(--color-encre);
  --color-focus-nuit: var(--color-texte-nuit);

  /* polices */
  /* titres : Archivo ExtraBold élargi (expanded, 125) ; le nom en semi-expanded (112,5).
     Dans Canva sans Pro : « Archivo Black ». */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* l'interface du téléphone de démonstration : la police système de l'appareil */
  --font-interface: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* tailles, fluides de 320 à 1440 px */
  --t-display: clamp(2.125rem, 1.661rem + 2.321vw, 3.75rem);
  --t-display-md: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);
  --t-heading-lg: clamp(1.15rem, 0.879rem + 1.357vw, 2.1rem);
  --t-heading-md: clamp(1.15rem, 1.064rem + 0.429vw, 1.45rem);
  --t-heading-sm: clamp(1rem, 0.943rem + 0.286vw, 1.2rem);
  --t-body: clamp(0.95rem, 0.936rem + 0.071vw, 1rem);
  --t-small: clamp(0.8rem, 0.779rem + 0.107vw, 0.875rem);
  --t-tag: clamp(0.75rem, 0.736rem + 0.071vw, 0.8rem);
  --t-geant: clamp(6rem, 2rem + 20vw, 24rem);
  /* titres en Archivo élargi : larges, donc un peu plus petits qu'une grotesque normale */
  --t-titre-hero: clamp(1.9rem, 1.35rem + 2.4vw, 3.5rem);
  --t-titre: clamp(1.55rem, 1.15rem + 1.9vw, 2.9rem);
  --t-titre-md: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);

  /* espacements */
  --marge: clamp(1.5rem, 0.214rem + 6.429vw, 6rem);
  --gout: clamp(1rem, 0.857rem + 0.714vw, 1.5rem);
  --s-8: clamp(0.375rem, 0.339rem + 0.179vw, 0.5rem);
  --s-16: clamp(0.875rem, 0.839rem + 0.179vw, 1rem);
  --s-24: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem);
  --s-32: clamp(1.75rem, 1.679rem + 0.357vw, 2rem);
  --s-48: clamp(2.25rem, 2.036rem + 1.071vw, 3rem);
  --s-64: clamp(2.5rem, 2.071rem + 2.143vw, 4rem);
  --sec-96: clamp(3rem, 2.143rem + 4.286vw, 6rem);
  --sec-144: clamp(4.5rem, 3.214rem + 6.43vw, 9rem);
  --sec-360: clamp(18rem, 16.714rem + 6.43vw, 22.5rem);
  --bord: 1.5px;

  /* rayons, plus courts que Pletor */
  --r-img: 3px;
  --r-vignette: 6px;
  --r-bouton: 4px;
  --r-carte: 8px;
  --r-panneau: 12px;
  --r-pied: 16px;
  --r-feuille: clamp(1rem, 0.714rem + 1.429vw, 1.5rem);

  /* mouvement */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* le ressort de la pile de cartes, proche du 260 / 20 du kit d'origine */
  --ease-ressort: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-court: 200ms;
  --dur-moyen: 450ms;
}