/* ==========================================================================
   Theme: Pop Quiz (default) — lifted from the Thinkori app's "neo" palette.
   NN/g-style frames: teal canvas, white header/cards, black ink borders,
   hard offset shadows; yellow/magenta/cyan pops. Deep teal is the only
   accent that holds 4.5:1 on the teal canvas.

   Adding a theme = copy this file, re-point the token values, register it
   in js/config.js (THEMES) and give it a swatch list. Nothing else changes.
   ========================================================================== */

:root,
[data-theme="pop-quiz"] {
  color-scheme: light;

  /* Canvas & surfaces */
  --canvas: #4fc9b2;
  --surface: #ffffff;
  --surface-2: #d9f4ee;
  --ink: #111114;
  --muted: #1f443c;
  --faint: #3e6b5f;
  --line: #111114;
  --line-strong: #000000;

  /* Brand action */
  --accent: #084a3f;
  --accent-hover: #06382f;
  --accent-ink: #ffffff;

  /* Accent pop — the magenta family used for highlights (text marks, icons) */
  --accent-pop: #c400bc;
  --accent-pop-ink: #ffffff;

  /* Chrome — the header wears the yellow, the page stays teal */
  --header-bg: #ffe135;
  --header-ink: #111114;

  /* Pops (decorative) */
  --highlight: #ffe135; /* yellow marker */
  --on-highlight: #111114; /* ink that sits ON the yellow */
  --pop-1: #c400bc;     /* magenta */
  --pop-2: #0e7490;     /* cyan */
  --pop-3: #d1440a;     /* orange */
  --pop-4: #96800a;     /* olive gold */

  /* Status */
  --good-bg: #a7f3d0;
  --good-ink: #064e3b;
  --warn-bg: #ffe135;
  --warn-ink: #111114;
  --bad-bg: #fecaca;
  --bad-ink: #7f1d1d;

  /* Structure — the brutalist signature */
  --border-w: 2px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-card: 4px 4px 0 0 var(--line);
  --shadow-card-hover: 8px 8px 0 0 var(--line);
  --shadow-inset: inset 0 0 0 1px rgba(17, 17, 20, 0.08);
  --btn-press-shift: 4px;

  /* Type */
  --font-display: "Space Grotesk Variable", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Focus */
  --focus-ring: 2px solid #084a3f;

  /* Decorative canvas texture: faint white math-grid over the teal */
  --canvas-grid-line: rgba(255, 255, 255, 0.22);
  --hero-panel: #ffffff;
}