/* ============================================================
   La Gazette d'Élisabeth — Design Tokens
   Palette éditoriale "Bridgerton" — parchemin, or, romance
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/PlayfairDisplay-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/PlayfairDisplay-Variable.woff2') format('woff2'),
       url('../assets/fonts/PlayfairDisplay-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/PlayfairDisplay-Variable.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/PlayfairDisplay-Italic-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/PlayfairDisplay-Italic-Variable.woff2') format('woff2'),
       url('../assets/fonts/PlayfairDisplay-Italic-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/PlayfairDisplay-Italic-Variable.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
/* NOTE : l'@import Google Fonts (Inter + Italianno) qui vivait ici a été
   RETIRÉ (2026-07-03). Placé après les @font-face, il était ignoré par les
   navigateurs depuis l'origine — le design a donc toujours été validé avec
   les polices de repli. Le réactiver changerait l'apparence du site ET
   enverrait les IP des visiteurs à Google sans consentement (RGPD). */

:root {
  /* ─── Surfaces parchemin ─── */
  --cream-50:  #FBF7EE;
  --cream-100: #F6EFE0;
  --cream-200: #EFE4CC;
  --cream-300: #E5D5B3;

  /* ─── Bleu Wedgwood ─── */
  --bleu-50:  #EAF1F1;
  --bleu-100: #D6E3E3;
  --bleu-200: #B8CFD0;
  --bleu-300: #94B6B7;
  --bleu-400: #6E9697;
  --bleu-500: #4F7A7B;
  --bleu-600: #3A5F60;

  /* ─── Rose poudré ─── */
  --rose-50:  #FBF1ED;
  --rose-100: #F5DDD4;
  --rose-200: #ECC2B5;
  --rose-300: #DDA194;
  --rose-400: #C77F71;
  --rose-500: #A55E53;

  /* ─── Or ─── */
  --or-50:   #FBF4DC;
  --or-100:  #F1E2A8;
  --or-200:  #E4CC76;
  --or-300:  #D4B257;
  --or-400:  #B7933D;
  --or-500:  #8C6D26;

  /* ─── Sauge ─── */
  --sauge-100: #DEE7D5;
  --sauge-200: #C2D2B2;
  --sauge-300: #9AB084;
  --sauge-400: #6F895A;

  /* ─── Violet "Sissi" ─── */
  --violet-50:  #F5F0FB;
  --violet-100: #EAE0F5;
  --violet-200: #D9CDEB;
  --violet-300: #C4B4DC;
  --violet-400: #A892C9;
  --violet-500: #8B6FA8;
  --violet-600: #6D5486;

  /* ─── Encre ─── */
  --encre-900: #2A2218;
  --encre-700: #4A3E2E;
  --encre-500: #6F614C;
  --encre-300: #9B8B70;
  --encre-200: #C8B89A;

  /* ─── Alias sémantiques ─── */
  --bg:        var(--cream-50);
  --bg-soft:   var(--cream-100);
  --bg-sunken: var(--cream-200);
  --surface:   #FFFCF6;
  --fg:        var(--encre-900);
  --fg-1:      var(--encre-700);
  --fg-2:      var(--encre-500);
  --fg-3:      var(--encre-300);
  --line:      #E4D8BE;
  --line-soft: #EFE6D1;

  --primary:        var(--bleu-200);
  --primary-deep:   var(--bleu-500);
  --primary-soft:   var(--bleu-50);
  --accent:         var(--or-300);
  --accent-deep:    var(--or-500);
  --secondary:      var(--rose-200);

  --success: #6F895A;
  --warning: #C49443;
  --danger:  #B05548;
  --info:    var(--bleu-400);

  /* ─── Typographie ─── */
  --font-display: 'Playfair Display', 'EB Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Italianno', 'Playfair Display', cursive;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  --fs-eyebrow: 0.78rem;
  --fs-meta:    0.82rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.25rem;
  --fs-h6:      1.05rem;
  --fs-h5:      1.25rem;
  --fs-h4:      1.55rem;
  --fs-h3:      2.0rem;
  --fs-h2:      2.75rem;
  --fs-h1:      3.75rem;
  --fs-display: 5.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-body:    1.65;
  --lh-loose:   1.85;

  --ls-eyebrow: 0.22em;
  --ls-tight:   -0.01em;
  --ls-snug:    -0.005em;

  /* ─── Espacements ─── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(74, 62, 46, 0.06);
  --shadow-sm: 0 2px 6px rgba(74, 62, 46, 0.07), 0 1px 2px rgba(74, 62, 46, 0.04);
  --shadow-md: 0 6px 18px rgba(74, 62, 46, 0.09), 0 2px 4px rgba(74, 62, 46, 0.05);
  --shadow-lg: 0 18px 40px rgba(74, 62, 46, 0.12), 0 4px 10px rgba(74, 62, 46, 0.06);
  --shadow-glow: 0 0 0 4px rgba(212, 178, 87, 0.18);
  --inner-soft: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(74,62,46,0.04);

  --ease-romance: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bloom:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   560ms;

  --measure: 68ch;
  --container: 1480px;
  --container-narrow: 820px;

  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.09  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection { background: var(--or-100); color: var(--encre-900); }
:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--r-sm); }