/* Tinystudy design tokens: one place for colour, type, space, radius, elevation and motion. Loaded before app.css and every other stylesheet.
   Dark is the default and light only when the student picks it in Settings (owner 2026-10-04; theme.js sets data-theme): the device's
   own light or dark setting is never followed, so no rule here or in app.css reads prefers-color-scheme. */
:root {
  color-scheme: dark;
  /* colour (light, dark) */
  --bg: light-dark(#f7f8fb, #0f1420);       --surface: light-dark(#ffffff, #171e2e);   --line: light-dark(#e1e5ec, #34405a);
  --ink: light-dark(#172033, #e8ecf3);      --muted: light-dark(#566074, #a3aec2);
  --accent: light-dark(#1f5eff, #7aa2ff);   --on-accent: light-dark(#ffffff, #0b1020);
  --fill: light-dark(#3a62c7, #7aa2ff);      /* the filled button: a calmer blue than --accent in light (white text on it is still 5.6:1), the same soft blue as --accent in dark (loop L04-A5) */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --on-ok: light-dark(#ffffff, #0b1020);   --ok: light-dark(#157347, #4cc38a);       --warn: light-dark(#9a3d06, #f0a35e);      --bad: light-dark(#b42318, #ff8a80);
  --scrim: rgb(0 0 0 / .4);
  --off: light-dark(#7a8496, #6b7686);      /* switch off state and other UI parts, at least 3:1 */
  --field-line: var(--off);   /* the edge of a text box, a list and a text area: at least 3:1 against the card in both themes (WCAG 1.4.11; tests/test_tokens_contrast.py) */
  --ok-soft: color-mix(in srgb, var(--ok) 12%, var(--surface));   --warn-soft: color-mix(in srgb, var(--warn) 12%, var(--surface));
  --bad-soft: color-mix(in srgb, var(--bad) 12%, var(--surface));
  /* type: five sizes, two weights */
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem;
  --fw: 400; --fw-b: 600; --lh: 1.5; --lh-t: 1.2;
  /* space (4 pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* radius */
  --r-s: 8px; --r-m: 16px; --r-pill: 999px;
  /* elevation (dark: none, the 1 px line carries it) */
  --e0: none; --e1: 0 1px 2px rgb(16 24 40 / .06), 0 4px 12px rgb(16 24 40 / .06); --e2: 0 12px 32px rgb(16 24 40 / .16);
  /* motion */
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; --d-cele: 700ms;
  --ease-out: cubic-bezier(.05, .7, .1, 1); --ease-in: cubic-bezier(.3, 0, .8, .15); --ease-std: cubic-bezier(.2, 0, 0, 1); --ease-io: cubic-bezier(.4, 0, .2, 1);
  /* layout */
  --tap: 44px; --content: 640px; --header-h: 56px; --bar-h: 56px; --safe-b: env(safe-area-inset-bottom, 0px);
  --focus: 2px solid var(--accent);
  /* old names, kept as aliases so welcome.css, guide.css, loading.css, lessons.css, reader.css keep working until their lanes migrate */
  --card: var(--surface); --accent-ink: var(--on-accent); --grey: var(--off); --radius: var(--r-m); --shadow: var(--e1);   /* aliases are removed in loop 15 */
}
:root:not([data-theme="light"]) { --e1: none; --e2: 0 12px 32px rgb(0 0 0 / .5); color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-cele: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* one focus look everywhere */
:focus-visible { outline: var(--focus); outline-offset: 2px; }

@keyframes ts-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ts-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes ts-spin { to { transform: rotate(360deg); } }
.ts-fade-in { animation: ts-fade-in var(--d-base) var(--ease-out) both; animation-iteration-count: 1; }
.ts-rise-in { animation: ts-rise-in var(--d-base) var(--ease-out) both; animation-iteration-count: 1; }
.ts-pop { animation: ts-pop var(--d-base) var(--ease-out) both; animation-iteration-count: 1; }
.ts-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }