/* ══════════════════════════════════════════════════════════════
   QUATRE — CSS TOKENS (Custom Properties)
   Consolidated from all 4 pages
   ═════════════════════════════════════════════════════════════ */

:root {
  /* Colors — light theme (index.html) */
  --bg-light: #ffffff;
  --bg-dark: #0a0a0a;
  --text-dark: #0f0f0f;
  --text-light: #f4f4f4;
  --muted: #595959;
  --accent: #e7ddcf;
  --card-border: #1f1f1f;

  /* Colors — case-study.html (dark theme) */
  --bg: #f8f8f8;
  --text: #000000;
  --text-muted: #595959;
  --text-sub: #b5b5b5;
  --brand: #f40202;
  --purple: #9747ff;
  --lemon: #bcff00;
  --blue: #00baff;
  --yellow: #ffc700;
  --orange: #ff5900;
  --stroke-dark: #333333;

  /* Layout */
  --max-width: 1220px;
  --max-w: 1280px;
  --radius: 8px;
  --nav-h: 64px;
  --grid-gap: 12px;

  /* Typography */
  --font-serif: "Spectral", Georgia, serif;
  --font-sans: "Inter", Arial, sans-serif;
  --font-mono: "GTFlexaMono", monospace;

  /* Typography scale — fluid (identique@≤1728px, scale up vers 2560px) */
  --headline-xl-size: clamp(48px, 2.78vw, 72px);
  --headline-xl-lh: clamp(56px, 3.24vw, 84px);
  --headline-lg-size: clamp(32px, 1.85vw, 48px);
  --headline-lg-lh: clamp(40px, 2.31vw, 56px);
  --text-base-size: clamp(16px, 0.93vw, 20px);
  --text-base-lh: clamp(24px, 1.39vw, 30px);
  --text-sm-size: clamp(13px, 0.75vw, 16px);
  --text-sm-lh: clamp(20px, 1.16vw, 24px);
  --text-sm-lh-16: clamp(16px, 0.93vw, 20px);

  /* Fluid spacing */
  --pad-x: clamp(32px, 1.85vw, 56px);
  --section-pad-y: clamp(80px, 6.37vw, 140px);

  /* Shadow */
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.13);
}