/* ═══════════════════════════════════════════════════════════════
   TOKENS · variables de design Hyvirtus landing
   Dark mode par défaut, light mode via [data-theme="light"]
   Source de vérité Design system Hyvirtus (cf. CLAUDE.md)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg-dark: #0c1020;
  --bg-panel: #0f1424;
  --bg-input: rgba(0, 0, 0, 0.25);
  --bg-inner: rgba(255, 255, 255, 0.04);
  --bg-deep: #0a0d18;

  --accent: #e6c229;
  --accent-hover: #d4af37;
  --accent-glow: rgba(230, 194, 41, 0.15);
  --champagne: #c9a36a;
  --champagne-soft: rgba(201, 163, 106, 0.55);
  --champagne-glow: rgba(201, 163, 106, 0.22);
  /* Champagne lisible pour du TEXTE accent : en mode sombre le champagne pur passe,
     en mode clair il faut la version foncée (voir bloc [data-theme="light"]). */
  --champagne-ink: var(--champagne);

  --text-strong: rgba(255, 255, 255, 0.94);
  --text-main: rgba(255, 255, 255, 0.84);
  --text-mid: rgba(255, 255, 255, 0.72);
  --text-dim: rgba(255, 255, 255, 0.55);
  --text-mute: rgba(255, 255, 255, 0.42);
  --text-faint: rgba(255, 255, 255, 0.22);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(148, 163, 184, 0.38);
  --border-soft: rgba(148, 163, 184, 0.16);
  --border-divider: rgba(255, 255, 255, 0.07);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-dropdown: 0 30px 80px rgba(0, 0, 0, 0.45);

  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --topbar-h: 83px; /* calé sur la hauteur du header Edgewonk */
  --landing-max: 1280px;
}

[data-theme="light"] {
  --bg-dark: #f7f4ec;
  --bg-panel: #ffffff;
  --bg-input: #fcfaf4;
  --bg-inner: rgba(15, 20, 36, 0.03);
  --bg-deep: #ffffff;

  --accent: #c9a36a;
  --accent-hover: #8d6f3a;
  --accent-glow: rgba(201, 163, 106, 0.14);
  --champagne: #c9a36a;
  --champagne-soft: rgba(201, 163, 106, 0.55);
  --champagne-glow: rgba(201, 163, 106, 0.20);
  /* Champagne foncé LISIBLE sur fond clair : 4.70:1 sur #ffffff (AA texte normal),
     4.28:1 sur le crème #f7f4ec. Déjà employé par les .how-*-em de la landing. */
  --champagne-ink: #8d6f3a;

  --text-strong: #1a2238;
  --text-main: #2d3a52;
  --text-mid: #5a6478;
  --text-dim: #6b7484;
  --text-mute: #767f90;
  --text-faint: #b3b9c4;

  --border: rgba(15, 20, 36, 0.10);
  --border-strong: rgba(15, 20, 36, 0.14);
  --border-soft: rgba(15, 20, 36, 0.06);
  --border-divider: rgba(15, 20, 36, 0.06);

  --shadow-card: 0 4px 14px rgba(15, 20, 36, 0.06);
  --shadow-modal: 0 24px 60px rgba(15, 20, 36, 0.14);
  --shadow-dropdown: 0 20px 50px rgba(15, 20, 36, 0.10);
}

/* ── Anti force-dark (Android Chrome « auto dark ») ─────────────
   Les pages landing sont claires forcées : on déclare explicitement le
   schéma pour que le navigateur n'assombrisse jamais la page de force.
   Doublé par <meta name="color-scheme" content="only light"> dans chaque
   page (la CSS peut charger après le premier rendu). */
[data-theme="light"] { color-scheme: only light; }
:root:not([data-theme="light"]) { color-scheme: dark; }