/* ============================================================
   tokens.css — Variables de design ISW Éducation
   DA validée : Bricolage Grotesque + Inter / Bleu profond + Teal
   ============================================================ */
:root{
  /* --- Fontes --- */
  --font-title:"Bricolage Grotesque","Bricolage",system-ui,sans-serif;
  --font-body :"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* --- Palette : Bleu royal + Rouge (logo ISW) --- */
  --c-ink:#101A4D;          /* bleu nuit (titres, footer) */
  --c-primary:#2348C8;      /* bleu royal du logo (liens, CTA secondaire) */
  --c-primary-700:#18348F;
  --c-primary-50:#EAEEFC;
  --c-accent:#E5322B;       /* rouge du logo — CTA principaux & accents */
  --c-accent-700:#B81E1A;
  --c-accent-50:#FDECEB;

  --c-text:#0F172A;
  --c-text-2:#475569;
  --c-text-inv:#FFFFFF;
  --c-bg:#F8FAFC;
  --c-surface:#FFFFFF;
  --c-border:#E2E8F0;

  --c-success:#2FA37C;
  --c-danger:#DC2626;
  --c-warning:#D97706;

  /* CTA hiérarchisés */
  --cta-primary-bg:var(--c-accent);    --cta-primary-fg:#FFFFFF;
  --cta-secondary-bg:var(--c-primary); --cta-secondary-fg:#FFFFFF;

  /* --- Échelle typographique fluide --- */
  --step--1:clamp(.83rem,.79rem + .2vw,.94rem);
  --step-0 :clamp(1rem,.95rem + .25vw,1.13rem);
  --step-1 :clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2 :clamp(1.56rem,1.3rem + 1.3vw,2.25rem);
  --step-3 :clamp(1.95rem,1.6rem + 1.9vw,3rem);
  --step-4 :clamp(2.44rem,1.9rem + 2.7vw,3.82rem);
  --step-6 :clamp(2.9rem,2.2rem + 4.2vw,5.2rem);

  /* --- Espacements (base 4px) --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;

  /* --- Rayons --- */
  --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-pill:999px;

  /* --- Ombres --- */
  --shadow-sm:0 1px 2px rgba(11,42,74,.06);
  --shadow-md:0 10px 30px -12px rgba(11,42,74,.18);
  --shadow-lg:0 28px 60px -18px rgba(11,42,74,.28);

  /* --- Layout --- */
  --container:1200px;
  --container-narrow:760px;
  --header-h:72px;

  /* --- Transitions --- */
  --transition:200ms cubic-bezier(.4,0,.2,1);
  --transition-slow:420ms cubic-bezier(.16,1,.3,1);
}