/* Design tokens. Every colour, radius, shadow and font in the app comes from here.
   Base palette first in each block; derived tokens (mostly color-mix of the base) follow. */
:root {
  color-scheme: light;
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F1F3F7; --surface-3:#E9ECF2;
  --border:#E3E7EE; --border-strong:#CDD3DE;
  --text:#0F172A; --text-2:#475569; --text-3:#5B677A; /* darker than slate-500 so 12–14px text passes 4.5:1 on --bg, --surface-2/3 and --accent-soft */
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-soft:#EEF0FF; --accent-text:#3730A3; --on-accent:#FFFFFF;
  --success:#047857; --success-soft:#E8F7F0; --danger:#C62828; --danger-soft:#FDECEC; --warning:#A15C07; --warning-soft:#FEF4E2;
  --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); /* solid accent ring with a surface gap: 3:1+ on every background */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow-md:0 4px 16px rgba(15,23,42,.08); --shadow-lg:0 16px 48px rgba(15,23,42,.18);
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --header-h:60px; --content-max:1120px; --reading-max:760px;

  /* Derived tokens (some are re-tuned in the dark blocks) */
  --on-danger:#FFFFFF;
  --overlay:rgba(15,23,42,.42);
  --accent-border:color-mix(in srgb, var(--accent) 45%, var(--border));
  --track:color-mix(in srgb, var(--accent) 14%, transparent);   /* meter/progress track: lighter step of the accent */
  --header-bg:color-mix(in srgb, var(--surface) 84%, transparent);
  --code-bg:var(--surface-3);
  --shimmer:rgba(255,255,255,.55);

  --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:34px;
  --lh:1.55; --lh-tight:1.25;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --gutter:16px;
  --tap:44px;
  --btn-radius:10px;

  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:280ms;

  /* Stacking: content < header < FAB < menus < tutor panel < toasts. <dialog> uses the top layer. */
  --z-sticky:20; --z-header:50; --z-fab:60; --z-menu:70; --z-panel:80; --z-toast:90;

  --fab-bottom:0px;
}

@media (min-width: 768px) { :root { --gutter:24px; } }
@media (min-width: 1024px) { :root { --gutter:32px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0B0F19; --surface:#121826; --surface-2:#182032; --surface-3:#1F2940;
    --border:#253047; --border-strong:#34405C;
    --text:#E8EBF3; --text-2:#A6AFC2; --text-3:#8A93A8;
    --accent:#8B93FF; --accent-hover:#A5ABFF; --accent-soft:rgba(139,147,255,.14); --accent-text:#C9CCFF; --on-accent:#0B0F19;
    --success:#4ADE9B; --success-soft:rgba(74,222,155,.12); --danger:#FF8A80; --danger-soft:rgba(255,138,128,.12); --warning:#F5B94A; --warning-soft:rgba(245,185,74,.12);
    --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 16px 48px rgba(0,0,0,.6);

    --on-danger:#0B0F19;
    --overlay:rgba(3,6,14,.66);
    --track:color-mix(in srgb, var(--accent) 18%, transparent);
    --header-bg:color-mix(in srgb, var(--surface) 80%, transparent);
    --shimmer:rgba(255,255,255,.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0B0F19; --surface:#121826; --surface-2:#182032; --surface-3:#1F2940;
  --border:#253047; --border-strong:#34405C;
  --text:#E8EBF3; --text-2:#A6AFC2; --text-3:#8A93A8;
  --accent:#8B93FF; --accent-hover:#A5ABFF; --accent-soft:rgba(139,147,255,.14); --accent-text:#C9CCFF; --on-accent:#0B0F19;
  --success:#4ADE9B; --success-soft:rgba(74,222,155,.12); --danger:#FF8A80; --danger-soft:rgba(255,138,128,.12); --warning:#F5B94A; --warning-soft:rgba(245,185,74,.12);
  --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 16px 48px rgba(0,0,0,.6);

  --on-danger:#0B0F19;
  --overlay:rgba(3,6,14,.66);
  --track:color-mix(in srgb, var(--accent) 18%, transparent);
  --header-bg:color-mix(in srgb, var(--surface) 80%, transparent);
  --shimmer:rgba(255,255,255,.05);
}