/* =====================================================================
   TOKENS : les "variables de design" du site.
   Toutes les couleurs, polices, tailles, espacements et durées viennent d'ici.
   Les autres fichiers CSS n'écrivent (presque) jamais une couleur en dur :
   ils utilisent var(--nom). Change une valeur ici, tout le site suit.
   Les couleurs --sky-*, --far, --mid, --near, --cloud*, --star, --moon,
   --door*, --window servent aussi au PIXEL ART : le JavaScript les lit
   (voir js/pixel/palette.js). Voir docs/02-tokens-et-css.md
   ===================================================================== */

:root {
  color-scheme: dark;
  --canvas: #010411;
  --surface: #081430;
  --raised: #0a193b;
  --border: #23345c;
  --text-1: #f4fcff;
  --text-2: #a3aeca;
  --text-3: #7584a8;
  --text-disabled: #3d4d74;
  --accent: #f1db9e;
  --accent-hover: #f9e7ad;
  --accent-active: #e6bd80;
  --arcane: #8296c1;
  --border-accent: #f1db9e73;
  --focus: #f9e7ad;
  --glow: #e6bd8059;
  --glow-cool: #8296c14d;
  --scrim: #010411cc;
  --on-accent: #010411;
  --success: #86d0a8;
  --warning: #e6bd80;
  --error: #ef8a7a;
  --info: #cee2ff;
  --sky-0: #010411;
  --sky-1: #040c20;
  --sky-2: #0a193b;
  --sky-3: #23345c;
  --far: #16264c;
  --mid: #081430;
  --near: #010411;
  --cloud: #3d4d74;
  --cloud-hi: #7584a8;
  --star: #f4fcff;
  --moon: #c2c4cf;
  --door: #e6bd80;
  --door-core: #fffdf1;
  --window: #f1db9e;
  --scarf: #c2402f;
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-label: var(--font-body);   /* les étiquettes utilisent la police du texte : une famille de moins à lire */
  --font-brand: "Cinzel", "Trajan Pro", "Times New Roman", serif;   /* réservée au logo MAXYME */
  --font-body: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-2xs: 13px;   /* étiquettes en capitales */
  --fs-xs: 13px;
  --fs-sm: 15px;    /* petits textes */
  --fs-md: 19px;
  --fs-lg: 25px;
  --fs-xl: 33px;
  --fs-2xl: 44px;
  --fs-3xl: 59px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s11: 44px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s24: 96px;
  --s32: 128px;
  --container: 1200px;
  --gutter: 20px;
  --header-h: 64px;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}