/* ============================================================
   KARKA PHYSICS — TOKENS
   Design system variables. The single source of truth for
   colors, spacing, typography, motion, and effects.
   Edit values here; never hard-code in other files.
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --color-bg-gradient: linear-gradient(135deg, #f8fbff, #eef7f5);
  --color-panel: #ffffff;
  --color-panel-soft: #fbfdff;
  --color-panel-tinted: #f2faf9;
  --color-panel-warm: #fffbeb;

  /* ---------- Text ---------- */
  --color-ink: #122033;
  --color-ink-soft: #203047;
  --color-muted: #627286;
  --color-muted-strong: #506176;
  --color-muted-soft: #43546a;

  /* ---------- Brand ---------- */
  --color-accent: #0f766e;
  --color-accent-light: #14b8a6;
  --color-accent-bg: #eef8f7;
  --color-accent-mist: #f2faf9;
  --color-accent-pale: #d9f0ee;

  /* ---------- Secondary accents ---------- */
  --color-amber: #f59e0b;
  --color-amber-dark: #d97706;
  --color-amber-warm: #a16207;
  --color-blue: #2563eb;
  --color-red: #b42318;

  /* ---------- Borders ---------- */
  --color-border: #e8eef6;
  --color-border-soft: #dce7f0;
  --color-border-faint: #e2eaf4;
  --color-border-accent: #d9f0ee;
  --color-border-amber: #fde7a7;
  --color-border-rail: rgba(210, 220, 234, 0.82);
  --color-border-card: rgba(210, 220, 234, 0.86);

  /* ---------- Shadows ---------- */
  --shadow-card: 0 18px 50px rgba(25, 41, 64, 0.10);
  --shadow-elevated: 0 30px 90px rgba(15, 23, 42, 0.28);
  --shadow-subtle: 0 8px 24px rgba(23, 36, 56, 0.04);
  --shadow-pill: 0 8px 30px rgba(23, 36, 56, 0.06);
  --shadow-rail-btn: 0 8px 24px rgba(23, 36, 56, 0.12);
  --shadow-scroll-btn: 0 6px 20px rgba(24, 39, 75, 0.08);
  --shadow-glow-accent: 0 14px 30px rgba(15, 118, 110, 0.22);
  --shadow-glow-play: 0 10px 24px rgba(20, 184, 166, 0.18);
  --shadow-glow-mic:
    0 18px 34px rgba(15, 118, 110, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  /* ---------- Geometry ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 22px;

  /* ---------- Typography ---------- */
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Fraunces, serif;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.28s;

  /* ---------- Layout ---------- */
  --rail-width-expanded: 260px;
  --rail-width-collapsed: 76px;
  --teacher-column-width: 342px;
}