/* ==========================================================================
   RBF — TOKENS (source unique de vérité)
   Refonte structurelle : cette feuille remplace toutes les générations de
   thèmes antérieures. Une seule échelle de couleurs, un seul contrat de thème.
   ========================================================================== */

:root{
  /* --- marque ---------------------------------------------------------- */
  --rbf-navy:#071C2C;
  --rbf-deep:#0B2638;
  --rbf-cyan:#00D8FF;
  --rbf-orange:#FF6B00;
  --rbf-yellow:#FFC400;
  --rbf-white:#FFFFFF;
  --rbf-ice:#F3F8FA;
  --rbf-sky:#EAFBFF;
  --rbf-graphite:#18232B;
  --rbf-success:#16A66A;

  /* --- surfaces & texte (sémantiques, jamais littéraux dans les composants) */
  --surface:#FFFFFF;
  --surface-2:#F3F8FA;
  --surface-3:#EAFBFF;
  --surface-inverse:#071C2C;
  --surface-inverse-2:#0B2638;
  --surface-offer:#E85D00;

  --text:#101B22;
  --text-2:#3C4C56;
  --text-3:#55666F;
  --text-on-dark:#EAF3F7;
  --text-on-dark-2:#B9CFDA;
  --text-on-dark-3:#8FAEC0;
  --text-on-offer:#FFFFFF;

  --border:#DDE7EC;
  --border-2:#C9D8E0;
  --border-dark:rgba(255,255,255,.16);

  --accent:var(--rbf-orange);
  --accent-2:var(--rbf-cyan);

  /* --- typographie ----------------------------------------------------- */
  --font-display:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- géométrie et profondeur (système unique, plus de 30-40 px partout) */
  --r-xs:10px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(7,28,44,.06), 0 4px 12px rgba(7,28,44,.07);
  --sh-2:0 2px 6px rgba(7,28,44,.08), 0 14px 32px rgba(7,28,44,.10);
  --sh-3:0 24px 60px rgba(7,28,44,.16);
  --sh-offer:0 16px 36px rgba(255,107,0,.28);

  --c:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   CONTRAT DE THÈME
   Un composant ne devine jamais son contexte : la section déclare son thème,
   et les composants lisent les variables sémantiques. Plus de contraste
   accidentel possible : un composant clair dans une section sombre reçoit
   explicitement data-theme="light".
   ========================================================================== */
[data-theme="light"], .theme-light{
  --surface:var(--rbf-white);
  --surface-2:var(--rbf-ice);
  --surface-3:var(--rbf-sky);
  --text:#101B22; --text-2:#3C4C56; --text-3:#55666F;
  --border:#DDE7EC; --border-2:#C9D8E0;
  color:var(--text);
}
[data-theme="dark"], .theme-dark{
  --surface:var(--rbf-navy);
  --surface-2:var(--rbf-deep);
  --surface-3:#0E3145;
  --text:#FFFFFF; --text-2:#DCEAF2; --text-3:#9FC0CF;
  --border:rgba(255,255,255,.16); --border-2:rgba(255,255,255,.26);
  color:var(--text-on-dark);
}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{ color:#fff; }