/* ==========================================================================
   Témoins d'Alex — Design tokens
   Direction : mysticisme cosmique / brochure sectaire de science-fiction
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --color-void: oklch(13% 0.032 258);
  --color-abyss: oklch(17% 0.038 256);
  --color-deep: oklch(21% 0.042 254);
  --color-surface: oklch(26% 0.038 252);
  --color-surface-hi: oklch(32% 0.036 250);
  --color-panel: oklch(24% 0.04 252 / 0.62);
  --color-panel-solid: oklch(22% 0.042 253);

  /* --- Accent (la Flamme) ---------------------------------------------- */
  --color-flame: oklch(84% 0.135 206);
  --color-flame-bright: oklch(93% 0.115 200);
  --color-flame-deep: oklch(66% 0.128 226);
  --color-flame-ink: oklch(46% 0.11 235);
  --color-halo: oklch(84% 0.135 206 / 0.35);

  /* --- Secondaire (le Riz Sacré) --------------------------------------- */
  --color-grain: oklch(88% 0.11 92);
  --color-grain-deep: oklch(72% 0.13 74);

  /* --- Texte ------------------------------------------------------------ */
  --color-text: oklch(97% 0.008 240);
  --color-text-soft: oklch(85% 0.014 235);
  --color-text-muted: oklch(70% 0.02 238);
  --color-text-faint: oklch(56% 0.024 240);

  /* --- Bordures --------------------------------------------------------- */
  --border-hairline: 1px solid oklch(70% 0.03 240 / 0.16);
  --border-glow: 1px solid oklch(84% 0.135 206 / 0.42);
  --border-strong: 1px solid oklch(84% 0.135 206 / 0.75);

  /* --- Typographie ------------------------------------------------------ */
  --font-display: "Oswald", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-nano: 0.6875rem;
  --text-micro: 0.75rem;
  --text-small: 0.8125rem;
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h4: clamp(1.05rem, 0.98rem + 0.3vw, 1.3rem);
  --text-h3: clamp(1.35rem, 1.15rem + 0.8vw, 2rem);
  --text-h2: clamp(1.9rem, 1.4rem + 2.1vw, 3.4rem);
  --text-hero: clamp(2.1rem, 1.1rem + 4.1vw, 5.1rem);
  --text-poster: clamp(2.4rem, 1.2rem + 4.6vw, 5rem);

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.3em;

  /* --- Espacement ------------------------------------------------------- */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --space-gutter: clamp(1.25rem, 0.6rem + 2.4vw, 4rem);

  /* --- Structure -------------------------------------------------------- */
  --sidebar-width: 17rem;
  --ticker-height: 4.25rem;
  --content-max: 76rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-pill: 999px;

  /* --- Ombres et lueurs ------------------------------------------------- */
  --glow-sm: 0 0 12px oklch(84% 0.135 206 / 0.4);
  --glow-md: 0 0 28px oklch(84% 0.135 206 / 0.35);
  --glow-lg: 0 0 60px oklch(84% 0.135 206 / 0.3);
  --shadow-panel: 0 18px 48px oklch(8% 0.03 260 / 0.55);
  --shadow-lift: 0 26px 70px oklch(8% 0.03 260 / 0.68);

  /* --- Mouvement -------------------------------------------------------- */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 720ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
}