/* ============================================================
   DESIGN TOKENS — Écrire en Harmonie
   Palette : sable, vert d'eau, bleu doux, terracotta, or discret
   ============================================================ */

:root {
  /* ---- Couleurs : neutres sable ---- */
  --sand-50:  #faf6ef;
  --sand-100: #f6efe4;
  --sand-200: #ede2cf;
  --sand-300: #ddcdb2;
  --sand-400: #c2ad8a;
  --sand-500: #9d8866;

  /* ---- Vert d'eau (signature) ---- */
  --sage-50:  #eef2ee;
  --sage-100: #dde6dc;
  --sage-200: #c0cfbe;
  --sage-300: #9bb098;
  --sage-400: #7a8a78;
  --sage-500: #5d6c5b;
  --sage-600: #455243;
  --sage-700: #2f3a2e;

  /* ---- Bleu doux ---- */
  --mist-50:  #eef3f6;
  --mist-100: #dce6ec;
  --mist-200: #b8cbd6;
  --mist-300: #8fa9b8;
  --mist-400: #6a8898;

  /* ---- Accent chaleur (terracotta très désaturé) ---- */
  --warm-100: #f3dccd;
  --warm-200: #dcb59a;
  --warm-300: #c89878;
  --warm-400: #b88665;
  --warm-500: #9c6e4f;

  /* ---- Or discret ---- */
  --gold-300: #d6b87a;
  --gold-400: #b89758;

  /* ---- Texte ---- */
  --ink-900: #2a2a25;   /* presque noir, chaud */
  --ink-700: #4a4a42;
  --ink-500: #6f6f64;
  --ink-300: #a09e92;

  /* ---- Surfaces ---- */
  --bg:        var(--sand-50);
  --bg-soft:   var(--sand-100);
  --bg-accent: var(--sage-50);
  --surface:   #ffffff;
  --line:      rgba(74, 74, 66, 0.12);
  --line-soft: rgba(74, 74, 66, 0.06);

  /* ---- Sémantique ---- */
  --primary:        var(--sage-500);
  --primary-hover:  var(--sage-600);
  --primary-press:  var(--sage-700);
  --primary-soft:   var(--sage-100);

  --accent-warm:    var(--warm-400);
  --accent-gold:    var(--gold-400);

  --focus-ring:     var(--warm-400);

  /* ---- Typographie ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-50:  0.78rem;   /* 12.5px */
  --fs-100: 0.875rem;  /* 14px */
  --fs-200: 1rem;      /* 16px */
  --fs-300: 1.125rem;  /* 18px */
  --fs-400: 1.25rem;   /* 20px */
  --fs-500: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  --fs-600: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem);
  --fs-700: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-800: clamp(2.6rem, 1.5rem + 4.5vw, 4.5rem);
  --fs-900: clamp(3rem, 1.7rem + 6vw, 6rem);

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  /* ---- Espacements ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-14: 6rem;
  --space-16: 8rem;

  /* ---- Layout ---- */
  --container:    1240px;
  --container-sm: 920px;
  --gutter:       clamp(1.25rem, 1rem + 1.5vw, 2rem);
  --section-y:    clamp(4rem, 3rem + 4vw, 7.5rem);

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Ombres (douces, jamais agressives) ---- */
  --shadow-xs: 0 1px 2px rgba(45, 50, 45, 0.04), 0 1px 1px rgba(45, 50, 45, 0.03);
  --shadow-sm: 0 4px 14px rgba(45, 50, 45, 0.05), 0 2px 4px rgba(45, 50, 45, 0.04);
  --shadow-md: 0 12px 30px rgba(45, 50, 45, 0.08), 0 4px 10px rgba(45, 50, 45, 0.04);
  --shadow-lg: 0 24px 60px rgba(45, 50, 45, 0.12), 0 8px 20px rgba(45, 50, 45, 0.06);
  --shadow-glow: 0 30px 80px rgba(120, 138, 120, 0.18);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease);
  --t-base: 280ms var(--ease);
  --t-slow: 520ms var(--ease-out);

  /* ---- Header ---- */
  --header-h: 80px;
}