/* ============================================================
   EVORIS — DESIGN TOKENS
   Direction : éditorial suisse, bandes encre / papier alternées,
   accent vermillon unique, display serif sur grotesque.
   ============================================================ */

:root {
  /* ---- Grounds ------------------------------------------------ */
  --ink: #121110;
  --ink-2: #1b1917; /* fond d'attente des visuels */
  --paper: #ece9e2;
  --paper-2: #f5f3ee; /* champs de saisie sur papier */

  /* ---- Accent ------------------------------------------------- */
  --vermilion: #ff3b20; /* accent sur encre + aplats de bouton */
  --vermilion-deep: #b8240e; /* accent sur papier — 5.2:1 sur papier */
  /* Encre sur vermillon : 5.3:1. Le blanc n'atteint que 3.6:1,
     insuffisant pour du texte de 13-14 px (WCAG AA demande 4.5:1). */
  --on-accent: #121110;

  /* ---- Texte (ratios mesurés sur leur fond) -------------------- */
  --ink-muted: #a8a49c; /* secondaire sur encre  — 7.6:1 */
  --ink-faint: #85817a; /* tertiaire sur encre   — 4.9:1 */
  --paper-muted: #56534c; /* secondaire sur papier — 6.3:1 */

  /* ---- Typographie -------------------------------------------- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(3rem, 1rem + 8.4vw, 8.6rem);
  --fs-h1: clamp(2.2rem, 1rem + 3.6vw, 3.8rem);
  --fs-h1-blog: clamp(2.4rem, 1rem + 4.4vw, 4.6rem);
  --fs-h1-article: clamp(2.2rem, 1rem + 4vw, 4.2rem);
  --fs-h2: clamp(2.2rem, 1rem + 4.2vw, 4.4rem);
  --fs-h2-wide: clamp(2.3rem, 1rem + 5.4vw, 5.4rem);
  --fs-h2-devis: clamp(2.3rem, 1rem + 5vw, 5rem);
  --fs-h2-legal: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --fs-h2-article: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
  --fs-h3-xl: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem);
  --fs-h3-lg: clamp(1.7rem, 1.2rem + 1.1vw, 2.3rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  --fs-h3-sm: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
  --fs-h4: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem);
  --fs-step: clamp(2.6rem, 2rem + 1.6vw, 3.6rem);
  --fs-quote: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --fs-lede: clamp(1.05rem, 0.98rem + 0.55vw, 1.45rem);
  --fs-intro: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  --fs-body: 17px;
  --fs-sm: 15.5px;
  --fs-xs: 13px;
  --fs-label: 11.5px;
  --fs-kicker: 12px;

  /* ---- Rythme ------------------------------------------------- */
  --wrap: 1320px;
  --pad-x: clamp(20px, 3vw, 64px);
  --sec-y: clamp(64px, 7vw, 120px);
  --page-y: clamp(40px, 5vw, 72px);
  --page-y-end: clamp(64px, 7vw, 110px);
  --gap-head: clamp(24px, 4vw, 64px);
  --gap-grid: clamp(20px, 2vw, 28px);
  --card-pad: clamp(28px, 2.6vw, 40px);
  --header-h: 96px;

  /* ---- Formes et mouvement ------------------------------------ */
  --radius: 2px;
  --hit: 44px; /* cible tactile minimale */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur: 0.25s;
  --shadow-pop: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------
   Contextes de fond. Chaque bande redéfinit les rôles de couleur ;
   les composants ne lisent que ces variables et fonctionnent donc
   à l'identique sur encre comme sur papier.
   ------------------------------------------------------------------ */

:root,
.ground-ink {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: var(--ink-muted);
  --faint: var(--ink-faint);
  --accent: var(--vermilion);
  --rule: rgba(236, 233, 226, 0.16);
  --rule-soft: rgba(236, 233, 226, 0.1);
  --rule-strong: rgba(236, 233, 226, 0.3);
  --tint: rgba(236, 233, 226, 0.06);
  --field-bg: rgba(236, 233, 226, 0.04);
  --invert-bg: var(--paper);
  --invert-fg: var(--ink);
}

.ground-paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--paper-muted);
  --faint: var(--paper-muted);
  --accent: var(--vermilion-deep);
  --rule: rgba(18, 17, 16, 0.14);
  --rule-soft: rgba(18, 17, 16, 0.1);
  --rule-strong: rgba(18, 17, 16, 0.3);
  --tint: rgba(18, 17, 16, 0.05);
  --field-bg: var(--paper-2);
  --invert-bg: var(--ink);
  --invert-fg: var(--paper);
}

.ground-ink,
.ground-paper {
  background: var(--bg);
  color: var(--fg);
}