/* Alpage · jetons de base (v0.2 pastel). Clair par défaut, sombre via [data-theme="dark"]. */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lexend:wght@400;500;600;700&display=swap");

:root {
  /* Interface */
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #EFEDE6;
  --line: #E2DFD6;
  --ink-2: #555A78;
  --ink: #1B1F3B;
  --ink-mute: #8A8EA6;
  --ink-disabled: #B4B6C6;

  /* Action (bouton principal, une fois par écran) */
  --action: oklch(0.89 0.10 88);
  --action-edge: oklch(0.78 0.10 78);
  --action-tint: oklch(0.95 0.06 90);
  --action-ink: #3A2A00;

  /* Feedback : réservé, aucune matière ne l'utilise */
  --good: oklch(0.82 0.10 152);
  --good-edge: oklch(0.70 0.10 152);
  --good-line: oklch(0.74 0.11 152);
  --good-tint: oklch(0.95 0.05 150);
  --good-ink: oklch(0.38 0.12 150);
  --good-btn-ink: oklch(0.30 0.08 152);
  --good-icon: oklch(0.62 0.12 152);

  --bad: oklch(0.85 0.08 27);
  --bad-edge: oklch(0.74 0.09 27);
  --bad-line: oklch(0.76 0.10 27);
  --bad-tint: oklch(0.95 0.035 27);
  --bad-ink: oklch(0.45 0.16 27);
  --bad-btn-ink: oklch(0.36 0.12 27);
  --bad-icon: oklch(0.64 0.14 27);

  /* Récompenses */
  --streak: oklch(0.74 0.13 55);
  --coin: oklch(0.78 0.12 82);
  --xp: oklch(0.45 0.10 250);

  /* Typo */
  --font-display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --font-text: "Lexend", system-ui, sans-serif;
  --fs-display: clamp(40px, 6vw, 56px);
  --fs-h1: clamp(28px, 4vw, 36px);
  --fs-h2: clamp(22px, 3vw, 26px);
  --fs-question: clamp(26px, 4vw, 32px);
  --fs-answer: 19px;
  --fs-body: 17px;
  --fs-small: 14px;
  --lh-body: 1.5;

  /* Espace (base 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* Profondeur */
  --shadow-sheet: 0 12px 32px rgb(27 31 59 / .14);

  /* Mouvement */
  --t-press: 90ms;
  --t-sheet: 220ms;
  --t-pop: 260ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Tailles tactiles */
  --hit: 44px;

  /* Marche des cartes et tuiles, tuile de la série */
  --edge: var(--line);
  --streak-tint: oklch(0.95 0.04 55);
}

[data-theme="dark"] {
  --bg: #12152B;
  --surface: #1C2040;
  --surface-2: #262B52;
  --line: #353B6C;
  --ink-2: #A9AECB;
  --ink: #F3F4FB;
  --action-edge: oklch(0.64 0.08 76);
  --action-tint: #2E3160;
  --streak: oklch(0.78 0.12 55);
  --streak-tint: #2E2A3A;
  --coin: oklch(0.82 0.11 82);
  --edge: #0B0D1E;
  --xp: oklch(0.80 0.10 250);
  /* Feedback sombre (la spec ne donne que les neutres : teintes foncées, encres claires) */
  --good-tint: oklch(0.30 0.06 150); --good-ink: oklch(0.88 0.10 150); --good-line: oklch(0.62 0.11 152); --good-btn-ink: oklch(0.22 0.06 152);
  --bad-tint: oklch(0.30 0.06 27); --bad-ink: oklch(0.88 0.08 27); --bad-line: oklch(0.62 0.10 27); --bad-btn-ink: oklch(0.22 0.07 27);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-pop: 0ms; --ease-spring: linear; }
}