/**
 * ============================================================
 *  variables.css — TOKENS DE DESIGN
 * ============================================================
 *  Palette, typographies, rayons, ombres et transitions.
 *  Modifier une valeur ici la répercute sur tout le site.
 * ============================================================
 */

:root {
  /* ---- Couleurs principales ---- */
  --ink:           #0B2230;   /* bleu-nuit profond (nuit sur le fleuve) */
  --ink-2:         #123245;   /* variante plus claire pour dégradés */
  --paper:         #F6F2E9;   /* blanc cassé "papier manifeste" */
  --paper-2:       #EFE9DA;   /* légèrement plus foncé, cartes sur fond clair */
  --amber:         #E39A3B;   /* ambre / encre de tampon douanier */
  --amber-dark:    #C87F27;
  --teal:          #1F7A7A;   /* teal maritime */
  --teal-dark:     #145858;
  --brick:         #C1452D;   /* rouge brique, touche Cameroun, usage rare */
  --ok:            #3C8E5B;

  /* ---- Texte ---- */
  --text-dark:     #12222B;
  --text-dark-60:  rgba(18, 34, 43, 0.62);
  --text-light:    #F6F2E9;
  --text-light-60: rgba(246, 242, 233, 0.66);

  /* ---- Typographies ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Rayons ---- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* ---- Ombres ---- */
  --shadow-sm: 0 2px 10px rgba(11, 34, 48, 0.08);
  --shadow-md: 0 12px 32px rgba(11, 34, 48, 0.14);
  --shadow-lg: 0 24px 60px rgba(11, 34, 48, 0.22);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s var(--ease);
  --t-med:  0.45s var(--ease);
  --t-slow: 0.8s var(--ease);

  /* ---- Mise en page ---- */
  --container: 1180px;
  --header-h: 84px;
  --gutter: clamp(20px, 5vw, 64px);
}