/* ============================================
   DESIGN TOKENS
   Toutes les variables design du site.
   Palette validée Antoine, mai 2026.
   ============================================ */

:root {
  /* Couleurs */
  --color-bg: #F2F0EC;            /* crème grège, fond principal */
  --color-bg-soft: #EAE7E1;       /* nuance plus profonde du fond */
  --color-ink: #1A1A1A;           /* encre, texte principal */
  --color-ink-soft: #4A4A4A;      /* texte secondaire, légendes */
  --color-ink-muted: #8A8580;     /* texte tertiaire, asides */
  --color-lavender: #B8C2D6;      /* bleu lavande signature, accent identitaire */
  --color-lavender-soft: #D9DEE8; /* bleu pâle, fond alternatif */
  --color-line: rgba(26, 26, 26, 0.12);
  --color-line-strong: rgba(26, 26, 26, 0.4);

  /* Typographies */
  --font-serif: 'PP Pangaia', 'Times New Roman', Georgia, serif;
  --font-sans: 'Cabinet Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Échelle typo (responsive via clamp) — réduite pour respiration */
  --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.82rem, 0.78rem + 0.25vw, 0.92rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --text-lg: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  --text-3xl: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  --text-4xl: clamp(2.6rem, 1.9rem + 3.5vw, 4.4rem);
  --text-5xl: clamp(3.2rem, 2.2rem + 5vw, 5.5rem);
  --text-hero: clamp(3rem, 2rem + 6vw, 6.5rem);

  /* Hauteurs de ligne */
  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.35;
  --lh-relaxed: 1.55;
  --lh-loose: 1.75;

  /* Espacements (base 8px) */
  --space-1: 0.25rem;
  --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-9: 6rem;
  --space-10: 8rem;
  --space-12: 12rem;
  --space-16: 16rem;

  /* Largeurs */
  --container-max: 1600px;
  --container-content: 1100px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* Radius : cards à 0 (vibe Book), boutons en pleines pastilles */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 999px;
  --pill-border-width: 1.5px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Z-index */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}