/* ─────────────────────────────────────────────────────────────
   OULA — Design tokens
   Couleurs échantillonnées sur les maquettes Figma (_references/)
   ───────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* ─── Marque / accent ─────────────────────────────────── */
    --c-coral:        #D94F3B; /* logo OULA, titres display, décor floral */
    --c-coral-bright: #FA5A5A; /* rouge vif — surface / vague du remplissage */

    /* ─── Indigo (texte, poche jean, prompts) ─────────────── */
    --c-indigo:        #0C0C6C;
    --c-indigo-pocket: #141471; /* denim de la poche */

    /* ─── Périwinkle (CTA, « Suivant », carte « Ton score ») ─ */
    --c-periwinkle:      #999DFE;
    --c-periwinkle-dark: #514C9F; /* état :hover des boutons CTA */
    --c-cta-active:      #FF5A5D; /* état :active (clic) des boutons CTA */

    /* ─── Lavande (sous-panneaux, « Le savais-tu ? ») ─────── */
    --c-lavender:   #EBEBFF;
    --c-lavender-2: #E4E4FC;

    /* ─── Rose (bandeau header, footer) ───────────────────── */
    --c-pink:       #FFDDE6;
    --c-pink-pale:  #FCF0F0;
    --c-pink-hover: #FDB9C2; /* survol des cartes-réponses du quiz */

    /* ─── Divers / neutres ────────────────────────────────── */
    --c-rose-dust: #C78181; /* numéros 01/02/03 « Comment ça marche » */
    --c-bg:        #FFFFFF;
    --c-ink:       #0C0C6C;
    --c-muted:     #6B6B8A;
    --c-border:    #D9D9F2;

    /* ─── Sang (poche) — cf. CLAUDE.md §9.3, à confirmer ──── */
    --c-blood:       var(--c-coral);
    --c-blood-light: var(--c-coral-bright);

    /* ─── Typographie ─────────────────────────────────────── */
    --font-display: "Original Quality", "League Spartan", system-ui, sans-serif;
    --font-body:    "League Spartan", system-ui, -apple-system, sans-serif;

    /* ─── Échelle typographique ───────────────────────────────
       Fluide entre 360px et 1440px de viewport. Progression
       régulière : ratio ~1.20 en mobile, ~1.25 en desktop (le
       contraste des titres s'accentue sur grand écran).

       Ces tokens sont l'ÉCHELLE BRUTE : ils ne disent que la
       taille. Les composants ne doivent PAS les utiliser
       directement — ils pointent sur les rôles définis juste
       après (--fs-body, --fs-ui…), qui portent l'intention.
       ───────────────────────────────────────────────────────── */
    --fs-100: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); /* 14 → 15 */
    --fs-200: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);     /* 16 → 17 */
    --fs-300: clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);   /* 18 → 20 */
    --fs-400: clamp(1.3125rem, 1.21rem + 0.44vw, 1.5625rem); /* 21 → 25 */
    --fs-500: clamp(1.5625rem, 1.41rem + 0.65vw, 1.9375rem); /* 25 → 31 */
    --fs-600: clamp(1.9375rem, 1.65rem + 1.25vw, 2.625rem);  /* 31 → 42 */
    --fs-700: clamp(2.375rem, 1.69rem + 3.06vw, 4rem);       /* 38 → 64 */

    /* ─── Rôles typographiques ────────────────────────────────
       C'est CETTE couche que les composants consomment. Le nom
       dit l'usage, pas la taille : si le corps de texte doit
       grossir, on ne touche qu'ici.
       ───────────────────────────────────────────────────────── */
    --fs-caption: var(--fs-100); /* mentions légales, copyright, notes */
    --fs-ui:      var(--fs-200); /* libellés d'interface, progression, chips */
    --fs-body:    var(--fs-300); /* corps de texte courant — la référence */
    --fs-lead:    var(--fs-400); /* chapô, sous-titre de hero, prompt de question */
    --fs-h3:      var(--fs-500);
    --fs-h2:      var(--fs-600);
    --fs-h1:      var(--fs-700);

    /* ─── Espacements fluides ─────────────────────────────── */
    --sp-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.375rem);
    --sp-xs:  clamp(0.5rem, 0.46rem + 0.19vw, 0.625rem);
    --sp-sm:  clamp(0.75rem, 0.66rem + 0.37vw, 1rem);
    --sp-md:  clamp(1rem, 0.86rem + 0.65vw, 1.5rem);
    --sp-lg:  clamp(1.5rem, 1.22rem + 1.30vw, 2.5rem);
    --sp-xl:  clamp(2rem, 1.44rem + 2.50vw, 4rem);
    --sp-2xl: clamp(3rem, 2.07rem + 4.17vw, 6rem);

    /* ─── Rayons, ombres, traits ──────────────────────────── */
    --radius-sm:   0.5rem;
    --radius-md:   1rem;
    --radius-lg:   1.5rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgb(12 12 108 / 0.08);
    --shadow-md: 0 4px 16px rgb(12 12 108 / 0.10);

    --border-thin: 1px solid var(--c-border);

    /* ─── Layout ──────────────────────────────────────────── */
    --container: 75rem;   /* 1200px */
    --container-narrow: 60rem;

    /* Hauteur commune des deux bandes du haut : navbar et bandeau
       de réassurance, qui doivent faire exactement la même. */
    --bar-height: clamp(3rem, 2.6rem + 1.4vw, 3.75rem);

    /* ─── Transitions ─────────────────────────────────────── */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 150ms;
    --dur-med:  300ms;
    --dur-slow: 900ms;

    /* Fondu entre deux paliers de la poche (§9.3). Plus long que
       `--dur-med` — le changement d'image doit se lire — mais bien plus
       court que l'ancienne montée continue du liquide, sinon le palier
       semble arriver après le score qu'il illustre. */
    --dur-pocket: 520ms;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur-med:  0ms;
      --dur-slow: 0ms;
      --dur-pocket: 0ms;
    }
  }
}