/* tokens.css — design variables. Calm, low-sensory by default.
   Themes (themes.css) override the color tokens via [data-theme].
   Font scale via [data-font]. Motion via [data-motion]. */

:root {
  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Radii */
  --r-1: 6px; --r-2: 10px; --r-3: 16px;

  /* Typography */
  --font-body: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-code: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* Font scale — overridden by [data-font] */
  --fs-base: 16px;
  --fs-code: 15px;
  --fs-sm: 0.85rem;
  --fs-xs: 0.78rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;

  /* Motion — overridden by [data-motion="reduced"] */
  --motion-fast: 140ms;
  --motion-med: 280ms;
  --motion-draw: 1; /* multiplier for turtle animation; 0 = instant */

  /* Layout */
  --topbar-h: 56px;
  --maxw: 1240px;

  /* Default (dark) palette — themes.css can override */
  --bg: #0f1220;
  --bg-2: #141829;
  --panel: #171b2e;
  --panel-2: #1e2440;
  --border: #2a3157;
  --text: #e8ebf7;
  --muted: #9aa3c7;
  --accent: #7aa2ff;
  --accent-ink: #0b1024;
  --success: #5fd0a0;
  --success-bg: #15301f;
  --warn: #ffcf6b;
  --warn-bg: #322a12;
  --code-bg: #0c0f1d;
  --star: #cfd8ff;
  --shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* Font-size scale */
[data-font="sm"] { --fs-base: 14px; --fs-code: 13px; --fs-sm: 0.8rem;  --fs-xs: 0.72rem; }
[data-font="md"] { --fs-base: 16px; --fs-code: 15px; --fs-sm: 0.85rem; --fs-xs: 0.78rem; }
[data-font="lg"] { --fs-base: 19px; --fs-code: 18px; --fs-sm: 1rem;    --fs-xs: 0.9rem;  }
[data-font="xl"] { --fs-base: 22px; --fs-code: 21px; --fs-sm: 1.15rem; --fs-xs: 1rem;    }

/* Reduced motion: honor explicit setting AND the OS preference. */
[data-motion="reduced"] {
  --motion-fast: 0ms;
  --motion-med: 0ms;
  --motion-draw: 0;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-med: 0ms; --motion-draw: 0; }
}