/* Palette, échelles et polices. Couleurs et typographie alignées sur
   l'écosystème Maconsole (MaConsole Card, MaConsole.ci) — voir
   docs/superpowers/specs/2026-09-04-hifi-tokens-couleurs-typographie-design.md. */
:root {
  --bg: #f5f5f7;
  --page: #ffffff;
  --raised: #ffffff;
  --ghost: #f7f7f7;
  --line: #dddddd;
  --line-strong: #cccccc;
  --ink: #222222;
  --text: #222222;
  --muted: #717171;
  --soft: #b8b8c0;
  --action-bg: #1090d2;
  --action-ink: #ffffff;
  --accent: #1090d2;
  --coral: #ff385c;
  --good: #16a34a;
  --warn: #8a5a08;
  --bad: #c13515;
  --off: #8e8e94;
  --shadow: 0 20px 60px rgba(24, 24, 27, .12);
  --sunk: #f5f5f7;
  --text-doux: #717171;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Verre dépoli — pour les surfaces flottantes au-dessus du contenu qui
     défile (en-tête collant en mode bulle). .95 (valeur d'origine du nav de
     MaConsole Card) est quasi opaque sur nos pages, au fond globalement plus
     clair et moins chargé que les leurs — le flou n'avait presque rien à
     montrer. Baissé à .6 : le contenu qui défile derrière reste visible et
     flouté, l'effet devient réellement perceptible. */
  --glass-bg: rgba(255, 255, 255, .6);
  --glass-blur: 20px;

  /* Le bloc de pied de page est sombre dans les deux thèmes. */
  --pied-fond: #111113;
  --pied-releve: #1a1a1e;
  --pied-trait: #2a2a2e;
  --pied-bord: #37373d;
  --pied-ink: #f4f4f5;
  --pied-muted: #9a9aa2;

  /* Hauteurs imposées par les planches. */
  --header-initial: 158px;
  --header-sticky: 58px;
  --header-plain: 106px;
  --header-mobile: 112px;
  --header-mobile-sticky: 56px;
  --footer-mobile: 249px;
  --buybar-mobile: 70px;
  --cart-btn: 44px;

  /* Largeurs de la modale de checkout, WF-06. */
  --modal-min: 760px;
  --modal-max: 980px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #000000;
  --page: #000000;
  --raised: #1a1a1a;
  --ghost: #1a1a1a;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .12);
  --ink: #e2e4ec;
  --text: #e2e4ec;
  --muted: #8b92a5;
  --soft: #9a9a9a;
  --action-bg: #1090d2;
  --action-ink: #ffffff;
  --accent: #1090d2;
  --coral: #ff385c;
  --warn: #e8b23a;
  --off: #7a7a7a;
  --shadow: 0 20px 60px rgba(0, 0, 0, .34);
  --sunk: #1a1a1a;
  --text-doux: #8b92a5;
  --glass-bg: rgba(255, 255, 255, .1);
  color-scheme: dark;
}

/* Mouvement. Une seule courbe, deux durées : le shell s'anime avec ça. */
:root {
  --t-rapide: 140ms;
  --t-standard: 260ms;
  --e-doux: cubic-bezier(.22, 1, .36, 1);
}