/**
 * tokens.css - Design tokens EPHKA V3
 * Charte M2 - 032c Rouge Sang
 * Généré le 16.05.2026
 */

:root {
  /* ── Couleurs ──────────────────────────────────── */
  --c-paper:   #f5f5f5;   /* fond papier */
  --c-ink:     #0a0a0a;   /* encre noire */
  --c-red:     #E30613;   /* rouge sang (accent rare) */
  --c-white:   #ffffff;
  --c-gray-1:  #e0e0e0;   /* séparateurs légers */
  --c-gray-2:  #999999;   /* texte secondaire */
  --c-gray-3:  #555555;   /* texte tertiaire */
  --c-gray-4:  #1a1a1a;   /* quasi-noir */

  /* ── Typographie ──────────────────────────────── */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body:    'Inter', 'Arial', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Échelle typographique - fluid clamp */
  --fs-xs:   clamp(0.65rem,  1vw, 0.75rem);
  --fs-sm:   clamp(0.8rem,   1.2vw, 0.875rem);
  --fs-base: clamp(0.9rem,   1.4vw, 1rem);
  --fs-md:   clamp(1rem,     1.6vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 2vw, 1.375rem);
  --fs-xl:   clamp(1.5rem,   3vw, 2rem);
  --fs-2xl:  clamp(2rem,     4vw, 3rem);
  --fs-3xl:  clamp(2.5rem,   5vw, 4.5rem);
  --fs-4xl:  clamp(3.5rem,   8vw, 7rem);
  --fs-hero: clamp(2rem,    7vw, 6rem);

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --ls-wide: 0.08em;
  --ls-xwide: 0.15em;

  /* ── Espacement ───────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Padding de section (mobile-first → desktop) */
  --section-py: clamp(4rem, 8vw, 8rem);
  --section-px: clamp(1.5rem, 5vw, 4rem);

  /* ── Grille ───────────────────────────────────── */
  --grid-max:    1440px;
  --grid-gutter: clamp(1.5rem, 4vw, 3rem);

  /* ── Bordures ─────────────────────────────────── */
  --border: 1px solid var(--c-ink);
  --border-light: 1px solid var(--c-gray-1);
  --border-red: 2px solid var(--c-red);

  /* ── Transitions ──────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-reveal: 600ms;

  /* ── Ombres ───────────────────────────────────── */
  --shadow-card: 0 2px 0 var(--c-ink);
  --shadow-hover: 4px 4px 0 var(--c-ink);
}

/* ── Mode sombre (désactivé pour l'instant - M2 = papier) */
/* @media (prefers-color-scheme: dark) { ... } */