/* ==========================================================================
   Design tokens — Mayu-Chan フランス語の道
   Tout le thème tient ici. Changer la palette = changer ce fichier.
   ========================================================================== */

:root {
  /* --- Palette Sakura ---------------------------------------------------- */
  --sakura:        #FFB7C5;
  --sakura-deep:   #FF8FA8;
  --sakura-soft:   #FFE3EA;
  --lavande:       #C9B6E4;
  --lavande-soft:  #EFE7F8;
  /* Même teinte, densité suffisante pour porter du texte : la lavande claire
     plafonne à 1,8 de contraste sur crème et devient franchement illisible sur
     le paysage de l'accueil. Réservée aux surtitres (ÉTAPE, CHAPITRE). */
  --lavande-encre: #7A63A8;
  --menthe:        #A8E6CF;
  --menthe-soft:   #E2F7EE;
  --peche:         #FFD3B6;
  --citron:        #FFF3B0;
  --ciel:          #B5E5F8;
  --creme:         #FFF9F3;
  --blanc:         #FFFFFF;

  /* --- Texte : jamais de gris pur, toujours teinté prune ------------------ */
  --encre:         #5D4157;
  --encre-doux:    #8B7089;
  --encre-pale:    #B9A4B6;

  /* --- Rôles sémantiques -------------------------------------------------- */
  --fond:          var(--creme);
  --surface:       var(--blanc);
  --accent:        var(--sakura-deep);
  --succes:        #4FB286;
  --succes-soft:   var(--menthe-soft);
  --erreur:        #E4796F;
  --erreur-soft:   #FFE6E3;

  /* --- Typographie -------------------------------------------------------- */
  --font-ja: 'M PLUS Rounded 1c', system-ui, sans-serif;
  --font-fr: 'Quicksand', 'M PLUS Rounded 1c', system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;

  /* --- Rythme ------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* --- Formes : tout est très arrondi ------------------------------------- */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-full: 999px;

  /* --- Ombres colorées, jamais noires ------------------------------------- */
  --sh-sm: 0 2px 8px rgba(255, 143, 168, 0.16);
  --sh-md: 0 6px 18px rgba(255, 143, 168, 0.20);
  --sh-lg: 0 12px 32px rgba(201, 182, 228, 0.28);
  --sh-in: inset 0 -3px 0 rgba(93, 65, 87, 0.10);

  /* --- Divers ------------------------------------------------------------- */
  --tap: 44px;                 /* cible tactile minimale */
  --header-h: 60px;
  --tabbar-h: 66px;
  --wrap: 620px;               /* largeur de lecture maximale */
}