/* ============================================================
   tokens.css — Duolingo-style design tokens.
   Bright, friendly, high-contrast. One screen at a time.
   ============================================================ */
:root {
  /* Brand / state palette (Duolingo-ish) */
  --green: #58cc02;        /* primary action */
  --green-d: #46a302;      /* primary 3D shadow */
  --green-soft: #d7ffb8;   /* correct feedback bg */
  --green-ink: #58a700;    /* correct feedback text */

  --blue: #1cb0f6;         /* secondary / info / selected */
  --blue-d: #1899d6;
  --blue-soft: #ddf4ff;

  --red: #ff4b4b;          /* wrong */
  --red-d: #e63f3f;
  --red-soft: #ffdfe0;
  --red-ink: #ea2b2b;

  --yellow: #ffc800;       /* highlight / stars */
  --purple: #ce82ff;

  /* Neutrals */
  --ink: #3c3c3c;          /* primary text */
  --ink-soft: #777777;     /* secondary text */
  --bg: #ffffff;           /* page */
  --panel: #f7f7f7;        /* subtle surface */
  --line: #e5e5e5;         /* borders */
  --line-d: #d0d0d0;       /* pressed border */
  --shadow: rgba(0,0,0,0.08);

  /* Active cell glow */
  --glow: #1cb0f6;

  /* Radii */
  --r: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* Layout */
  --maxw: 600px;           /* content column */
  --bar-h: 64px;           /* top progress bar zone */
  --foot-h: 92px;          /* bottom action zone */
  --tap: 48px;

  /* Type — Lexend */
  --font: "Lexend", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-title: clamp(1.25rem, 1.05rem + 1.6vw, 1.7rem);
  --fs-body: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  --fs-big: clamp(1.6rem, 1.2rem + 3vw, 2.4rem);

  /* Motion */
  --t-screen: 320ms;       /* screen transition */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* pop */
}