/*
  TOPEDU SEO OS — Design Tokens
  --------------------------------------------------------------------------
  Direction: "scantron precision" — a test-prep company's internal tool,
  built like an answer sheet: exact, gridded, quietly confident. Dark by
  default (deep ink-navy, not pure black), one warm marker-amber accent
  used sparingly for primary action/priority, one teal used for
  "correct/complete" states. Data reads in a monospace utility face, the
  way a score report reads in fixed columns.

  Light theme mirrors the same structure with inverted surfaces.
*/

:root {
  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --fs-2xs: 0.6875rem;   /* 11px — badges, timestamps */
  --fs-xs: 0.75rem;      /* 12px — labels, captions */
  --fs-sm: 0.8125rem;    /* 13px — secondary text */
  --fs-base: 0.9375rem;  /* 15px — body */
  --fs-md: 1.0625rem;    /* 17px — emphasized body */
  --fs-lg: 1.25rem;      /* 20px — card titles */
  --fs-xl: 1.625rem;     /* 26px — section headers */
  --fs-2xl: 2.25rem;     /* 36px — page headers */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;

  /* ---- Z ---- */
  --z-topbar: 50;
  --z-sidebar: 40;
  --z-palette: 100;
  --z-toast: 110;
}

/* ================= DARK (default) ================= */
:root,
[data-theme='dark'] {
  --bg: #0b0e14;
  --bg-inset: #070911;
  --surface: #131722;
  --surface-2: #1a2029;
  --surface-hover: #1f2632;
  --border: #242b38;
  --border-strong: #333c4d;

  --text: #e7eaf1;
  --text-dim: #9aa3b6;
  --text-faint: #626c80;

  --accent: #ff8a3d;        /* scantron marker amber */
  --accent-strong: #ff9d5c;
  --accent-ink: #2a1608;    /* text-on-accent for filled bubbles */

  --correct: #35c4a6;       /* teal — success / complete */
  --correct-dim: #1f4a41;

  --danger: #ff5d5d;
  --danger-dim: #4a1f1f;

  --warn: #f2c94c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ================= LIGHT ================= */
[data-theme='light'] {
  --bg: #f6f5f2;
  --bg-inset: #eeece7;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --surface-hover: #eae7df;
  --border: #e2ded4;
  --border-strong: #cfc9ba;

  --text: #1c1a15;
  --text-dim: #5c584c;
  --text-faint: #928c7a;

  --accent: #e26d1f;
  --accent-strong: #c95c14;
  --accent-ink: #fff4ea;

  --correct: #1f9c82;
  --correct-dim: #d6f1ea;

  --danger: #d64545;
  --danger-dim: #fbe1e1;

  --warn: #c9971f;

  --shadow-sm: 0 1px 2px rgba(20, 16, 8, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 16, 8, 0.08);
  --shadow-lg: 0 16px 48px rgba(20, 16, 8, 0.12);

  color-scheme: light;
}