/* =========================================================
   Design tokens — identité visuelle Alexandre Cholin
   ========================================================= */

:root {
  /* Couleurs */
  --bg: #F5F3EE;
  --bg-raised: #FBFAF7;
  --ink: #171A2B;
  --ink-soft: rgba(23, 26, 43, 0.68);
  --ink-faint: #5B5E6E; /* solide plutôt qu'alpha : garantit ≥4.5:1 sur --bg */
  --red: #E63946;
  --red-dark: #C62835;
  --navy: #2B3A55;
  --line: rgba(23, 26, 43, 0.12);
  --line-strong: rgba(23, 26, 43, 0.22);

  /* Mode sombre (inversion cohérente, activé via [data-theme="dark"] ou prefers-color-scheme) */
  --bg-dark: #171A2B;
  --ink-dark: #F5F3EE;

  /* Typographie */
  --font-display: "Kufam", "IBM Plex Sans", sans-serif;
  --font-text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique fluide */
  --fs-hero: clamp(2.6rem, 5.5vw + 1rem, 5.4rem);
  --fs-h1: clamp(2.2rem, 3.6vw + 1rem, 3.6rem);
  --fs-h2: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 0.9rem, 1.6rem);
  --fs-lead: clamp(1.1rem, 0.6vw + 1rem, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espacement */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Grille / container */
  --container-max: 78rem;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Radius & ombres (usage parcimonieux) */
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(23, 26, 43, 0.06), 0 8px 24px rgba(23, 26, 43, 0.06);

  /* Timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

[data-theme="dark"] {
  --bg: #171A2B;
  --bg-raised: #1E2238;
  --ink: #F5F3EE;
  --ink-soft: rgba(245, 243, 238, 0.72);
  --ink-faint: rgba(245, 243, 238, 0.44);
  --line: rgba(245, 243, 238, 0.14);
  --line-strong: rgba(245, 243, 238, 0.24);
}