/* AI-Koma Kids — jetons du design system.
   Une seule source pour les couleurs, typographies, rayons, ombres et espacements. Les composants n'utilisent que ces
   variables. Contrastes vérifiés (WCAG AA) pour le texte sur --color-bg et --color-surface.
   Revu le 29/10/2026 : plus doux, moins « application » : papier crème texturé, bouton abricot à texte foncé, violet adouci
   réservé aux liens et aux états choisis, polices rondes auto-hébergées (Fredoka, Nunito, licence OFL). */
:root {
  /* Lien, sélection, progression : « prune douce », moins vive que l'ancien violet. */
  --color-primary: #7A68CC;
  --color-primary-strong: #5A4AA8;   /* 6,3:1 sur --color-bg */
  --color-primary-soft: #EEEAFA;
  /* Bouton principal : abricot chaleureux, texte encre (7:1). */
  --color-cta: #F3A978;
  --color-cta-strong: #E8945E;
  --color-cta-soft: #FCE6D4;
  --color-on-cta: #3A3350;
  /* Secondaire : corail doux (accents) ; variante foncée pour le texte. */
  --color-secondary: #E8866A;
  --color-secondary-strong: #B5553A;
  --color-secondary-soft: #FBE4DC;
  /* Accent : soleil pâle (badges, étoiles, mise en avant). */
  --color-accent: #F7CD74;
  --color-accent-soft: #FFF3D8;
  /* Couleurs d'appoint des univers. */
  --color-mint: #9FD8C3;
  --color-mint-soft: #E6F5EE;
  --color-sky: #B2D2F0;
  --color-sky-soft: #E9F1FA;
  --color-blush: #F8D3CA;
  --color-blush-soft: #FCEDE8;

  /* Fonds : papier crème, cartes à peine plus claires, bandeaux sable. */
  --color-bg: #FFF7EC;
  --color-surface: #FFFDF8;
  --color-surface-tint: #F8ECDB;
  --color-night: #352B4F;       /* pied de page, fonds de mise en scène */

  /* Texte. */
  --color-ink: #3A3350;         /* 11,5:1 sur --color-bg */
  --color-ink-muted: #665E80;   /* 5,9:1 sur --color-bg */
  --color-on-primary: #FFFFFF;
  --color-border: #EADFCE;
  --color-border-strong: #D4C7B3;
  --color-input-border: #958670;     /* contour des champs : 3,3:1 sur le fond (WCAG 1.4.11) */

  /* États. */
  --color-success: #23774B;
  --color-success-soft: #E3F5EA;
  --color-error: #B3261E;
  --color-error-soft: #FDECEA;
  --color-warning: #8A5A00;
  --color-warning-soft: #FFF3D8;
  --color-info: #3B5BA9;
  --color-info-soft: #E8EEFC;
  --color-focus: #7A68CC;

  /* Typographie : Fredoka (titres, ronde et amicale) et Nunito (texte, très lisible), auto-hébergées ; repli système. */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-book: "Nunito", ui-rounded, "SF Pro Rounded", "Andika", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;   /* texte courant : 17 px, confortable sur tablette */
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --text-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.6rem);
  --text-book: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);

  /* Espacements (base 4 px). */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  /* Rayons et ombres : formes très douces, ombres chaudes, rares et diffuses. */
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-xl: 34px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(58 51 80 / 0.05), 0 3px 8px rgb(58 51 80 / 0.04);
  --shadow-md: 0 6px 16px rgb(58 51 80 / 0.07), 0 14px 36px rgb(58 51 80 / 0.06);
  --shadow-lg: 0 12px 32px rgb(58 51 80 / 0.12), 0 28px 64px rgb(58 51 80 / 0.08);

  /* Cibles tactiles : jamais moins de 48 px. */
  --touch: 48px;
  --container: 1160px;
  --container-narrow: 760px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}