/* ═══════════════════════════════════════════════════════════════════
   Design tokens — Muaythai Cameroun (thème clair)
   Palette dérivée du drapeau : vert #007A5E · rouge #CE1126 · or #FCD116
   posée sur un fond papier chaud plutôt que sur une base sombre.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs de marque ─────────────────────────────────────── */
  --vert-900: #04261b;
  --vert-800: #05372a;
  --vert-700: #075a41;
  --vert-600: #007a5e;
  --vert-500: #0d9a76;
  --vert-200: #b9e6d6;
  --vert-100: #e3f5ee;

  --rouge-800: #7c0a17;
  --rouge-700: #a10d1e;
  --rouge-600: #ce1126;
  --rouge-200: #f8ccd2;
  --rouge-100: #fdeaed;

  --or-700: #8a6f00;
  --or-600: #d8ae0b;
  --or-500: #fcd116;
  --or-200: #fdefb4;
  --or-100: #fffae3;

  /* ── Neutres — papier chaud, encre teintée vert ─────────────── */
  --papier: #faf8f3;
  --papier-alt: #f1eee6;
  --papier-creux: #e8e4d9;
  --blanc: #ffffff;

  --encre-900: #0d1a15;
  --encre-700: #2b3b34;
  --encre-500: #55645d;
  --encre-400: #5f6c66;
  --encre-200: #c3ccc7;

  /* ── Rôles sémantiques ──────────────────────────────────────── */
  --fond: var(--papier);
  --fond-alt: var(--papier-alt);
  --surface: var(--blanc);
  --surface-haute: var(--papier);
  --bordure: rgba(13, 26, 21, 0.12);
  --bordure-forte: rgba(13, 26, 21, 0.26);

  --texte: var(--encre-900);
  --texte-doux: var(--encre-500);
  --texte-faible: var(--encre-400);

  /* Sur les blocs pleins (footer, bandeau vert, cartes photo) */
  --sur-fonce: #f4f7f5;
  --sur-fonce-doux: rgba(244, 247, 245, 0.76);

  --accent: var(--vert-700);        /* surtitres, liens marqués */
  --action: var(--or-500);          /* fond des boutons primaires */
  --action-texte: var(--encre-900);
  --alerte: var(--rouge-600);
  --chiffre: var(--rouge-600);      /* grands nombres */

  /* ── Typographie ────────────────────────────────────────────── */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --texte-xs: 0.75rem;
  --texte-sm: 0.875rem;
  --texte-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --texte-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --texte-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --titre-sm: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --titre-md: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --titre-lg: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem);

  --interligne-serre: 0.94;
  --interligne-titre: 1.06;
  --interligne-texte: 1.65;

  /* ── Espacement ─────────────────────────────────────────────── */
  --gap-xs: 0.5rem;
  --gap-sm: 0.875rem;
  --gap-md: 1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;
  --section: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gouttiere: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --largeur-max: 1320px;
  --largeur-texte: 68ch;

  /* ── Formes ─────────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* ── Ombres — douces, portées vers le bas ───────────────────── */
  --ombre-sm: 0 1px 2px rgba(13, 26, 21, 0.06), 0 2px 8px rgba(13, 26, 21, 0.04);
  --ombre-md: 0 2px 4px rgba(13, 26, 21, 0.05), 0 12px 28px rgba(13, 26, 21, 0.08);
  --ombre-lg: 0 4px 8px rgba(13, 26, 21, 0.06), 0 28px 56px rgba(13, 26, 21, 0.12);

  /* ── Mouvement ──────────────────────────────────────────────── */
  --duree-rapide: 140ms;
  --duree: 280ms;
  --duree-lente: 620ms;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --entree: cubic-bezier(0.5, 0, 0.75, 0);

  /* ── Élévation ──────────────────────────────────────────────── */
  --z-menu: 100;
  --z-header: 110;
  --z-lightbox: 200;
}