/* =============================================================================
   00-VARIABLES.CSS — Charte graphique « Rue Pr Koné Tiémoman »
   Source unique de vérité : couleurs, typographie, espacements, rayons, ombres.
   Toutes les sections doivent utiliser CES variables (jamais de valeurs en dur).
   ========================================================================== */

:root {
  /* --- Couleurs de marque (déduites du panneau de rue + couverture) --------- */
  --rkt-navy:          #13234B;   /* Bleu nuit — couleur principale (panneau)   */
  --rkt-navy-deep:     #0D1935;   /* Bleu nuit foncé — fonds, footer            */
  --rkt-navy-soft:     #24386A;   /* Bleu nuit clair — hovers, bordures         */
  --rkt-gold:          #C9A24B;   /* Or / doré — couleur d'accent signature     */
  --rkt-gold-bright:   #E2A93A;   /* Or lumineux — CTA, surlignage              */
  --rkt-gold-soft:     #F1E4C4;   /* Or pâle — fonds de badges                  */

  /* --- Neutres -------------------------------------------------------------- */
  --rkt-white:         #FFFFFF;
  --rkt-cream:         #F8F6F0;   /* Fond de section alterné (crème)            */
  --rkt-cream-2:       #F1EEE6;
  --rkt-ink:           #1A1D24;   /* Texte principal                            */
  --rkt-muted:         #5B6270;   /* Texte secondaire                           */
  --rkt-line:          #E6E2D8;   /* Filets / bordures                          */

  /* --- Sémantique (états) --------------------------------------------------- */
  --rkt-whatsapp:      #25D366;   /* Bouton WhatsApp (contact commerçant)       */
  --rkt-success:       #2E9E5B;
  --rkt-danger:        #D0463B;

  /* --- Typographie ---------------------------------------------------------- */
  --rkt-font-title:    "Poppins", "Segoe UI", system-ui, sans-serif;  /* Hn     */
  --rkt-font-body:     "Inter", "Segoe UI", system-ui, sans-serif;    /* corps  */

  --rkt-fs-h1:   clamp(2.2rem, 5vw, 3.5rem);
  --rkt-fs-h2:   clamp(1.7rem, 3.5vw, 2.5rem);
  --rkt-fs-h3:   clamp(1.3rem, 2.2vw, 1.7rem);
  --rkt-fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --rkt-fs-body: 1rem;
  --rkt-fs-small:0.875rem;

  --rkt-lh-tight: 1.15;
  --rkt-lh-base:  1.65;

  /* --- Espacements (échelle cohérente) -------------------------------------- */
  --rkt-space-xs:  0.5rem;
  --rkt-space-sm:  1rem;
  --rkt-space-md:  1.75rem;
  --rkt-space-lg:  3rem;
  --rkt-space-xl:  5rem;
  --rkt-section-y: clamp(3rem, 7vw, 6rem);   /* padding vertical de section     */
  --rkt-container: 1200px;                    /* largeur max de contenu          */

  /* --- Rayons & ombres ------------------------------------------------------ */
  --rkt-radius-sm: 8px;
  --rkt-radius:    16px;
  --rkt-radius-lg: 24px;
  --rkt-radius-pill: 999px;

  --rkt-shadow-sm: 0 2px 10px rgba(19, 35, 75, 0.06);
  --rkt-shadow:    0 12px 30px rgba(19, 35, 75, 0.10);
  --rkt-shadow-lg: 0 22px 50px rgba(19, 35, 75, 0.16);

  /* --- Transitions ---------------------------------------------------------- */
  --rkt-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --rkt-t-fast: 0.2s var(--rkt-ease);
  --rkt-t:      0.35s var(--rkt-ease);
}