/* =========================================================
   WURUS · POESAM 2026 — Design tokens
   Toute valeur de charte vit ici. Ne pas écrire de HEX ailleurs.
   ========================================================= */

:root {
  /* ---------- Palette de marque ---------- */
  --cream:        #F5EBD9;  /* fond principal */
  --cream-deep:   #EBDBC0;  /* cartouches, boîtes info */
  --cream-hi:     #FCF7EE;  /* surfaces surélevées (cartes) */

  --brown:        #3B2510;  /* titres, texte fort */
  --brown-deep:   #2A1A0B;  /* contraste max, fonds sombres */

  --gold:         #B8862B;  /* OR DE MARQUE — décoration uniquement */
  --gold-light:   #D4A244;  /* hover, highlights, particules */
  --gold-strong:  #A87621;  /* or lisible — grands textes (>= 32px bold) */
  --gold-deep:    #8F6216;  /* or lisible — textes courants (AA 4.5:1) */

  --ink:          #1F1408;  /* corps de texte sur crème */
  --warm-grey:    #5A4B3B;  /* légendes, sous-titres */

  /* Accent secondaire — terre cuite. Issu des tokens WURUS (#B23A2A / #C27A5A),
     réservé aux frises et aux formes. Jamais pour du texte : c'est la seule
     couleur qui casse la monochromie or/brun sans la trahir. */
  --terracotta:       #B5532A;
  --terracotta-light: #CE6A3E;
  --terracotta-deep:  #93401F;

  /* Accent du pilier environnemental — issu des tokens WURUS
     (successColor #6FA64B), assombri pour tenir sur crème. */
  --leaf:      #4F7A32;
  --leaf-soft: rgba(79, 122, 50, 0.10);

  /* Surfaces sombres — slides 3, 6 et 9 (les trois sommets du récit) */
  --dark:        #241605;
  --dark-raised: #33200E;
  --dark-ink:    #F0E4CE;  /* texte sur fond sombre */
  --dark-muted:  #BFA98A;  /* légendes sur fond sombre */

  /* Voir docs/DESIGN_NOTES.md : --gold ne passe pas WCAG AA en texte.
     Règle : --gold = décor / traits / motifs.  Texte = --gold-strong ou --gold-deep. */

  /* ---------- Transparences dérivées ---------- */
  --gold-a08:  rgba(184, 134, 43, 0.08);
  --gold-a14:  rgba(184, 134, 43, 0.14);
  --gold-a24:  rgba(184, 134, 43, 0.24);
  --gold-a40:  rgba(184, 134, 43, 0.40);
  --brown-a08: rgba(59, 37, 16, 0.08);
  --brown-a16: rgba(59, 37, 16, 0.16);
  --brown-a60: rgba(59, 37, 16, 0.60);
  --brown-a88: rgba(42, 26, 11, 0.88);

  /* ---------- Typographie ---------- */
  --font-display: 'Unbounded', 'Trebuchet MS', system-ui, sans-serif;
  --font-intent:  'Momo Trust Display', Georgia, serif;   /* intention éditoriale */
  --font-label:   'Nasalization', 'Unbounded', sans-serif; /* étiquettes techniques */
  --font-body:    'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle calée sur la scène 1600 × 900 (px absolus, la scène est scalée) */
  --fs-display: 152px;
  --fs-h1:       82px;
  --fs-h2:       58px;
  --fs-h3:       38px;
  --fs-lead:     26px;
  --fs-body:     20px;
  --fs-small:    16px;
  --fs-micro:    13px;
  --fs-label:    12px;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.55;

  --tracking-label: 0.22em;
  --tracking-tight: -0.02em;

  /* ---------- Géométrie ---------- */
  --stage-w: 1600px;
  --stage-h: 900px;
  --gutter:  104px;   /* marge intérieure des slides */
  --radius:  12px;    /* rounding de charte */
  --radius-lg: 20px;
  --hairline: 1px;

  /* ---------- Élévation ---------- */
  --shadow-sm: 0 2px 8px rgba(59, 37, 16, 0.06);
  --shadow-md: 0 10px 30px rgba(59, 37, 16, 0.10);
  --shadow-lg: 0 24px 60px rgba(59, 37, 16, 0.14);

  /* ---------- Mouvement ---------- */
  --dur-fast:  180ms;
  --dur-mid:   340ms;
  --dur-slow:  600ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Chrome de navigation ---------- */
  --chrome-fg:      var(--brown);
  --chrome-bg:      rgba(252, 247, 238, 0.86);
  --chrome-border:  var(--gold-a24);
  --focus-ring:     0 0 0 3px var(--cream), 0 0 0 5px var(--gold-deep);
}