/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --hub-bg: #e9eef5;
  --hub-bg-gradient: radial-gradient(ellipse 120% 80% at 50% -20%, #dce8ff 0%, transparent 55%),
    linear-gradient(180deg, #eef2f8 0%, #e9eef5 100%);
  --hub-surface: #ffffff;
  --hub-surface-muted: #f4f7fb;
  --hub-surface-elevated: #ffffff;
  --hub-border: #d8e0ea;
  --hub-border-strong: #bcc8d8;
  --hub-ink: #0f172a;
  --hub-muted: #64748b;
  --hub-accent: #2563eb;
  --hub-accent-hover: #1d4ed8;
  --hub-accent-soft: #eff6ff;
  --hub-accent-soft-border: #93c5fd;
  --hub-accent-text: #1e40af;
  --hub-input-bg: #ffffff;
  --hub-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --hub-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --hub-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
  --hub-radius-sm: 8px;
  --hub-radius-md: 12px;
  --hub-radius-lg: 16px;
  --hub-radius-xl: 20px;
  --hub-radius-pill: 999px;
  --hub-good: #16a34a;
  --hub-good-soft: #dcfce7;
  --hub-bad: #dc2626;
  --hub-bad-soft: #fee2e2;
  --hub-timer-low-bg: #fef2f2;
  --hub-timer-low-border: #fecaca;
  --hub-timer-low-text: #dc2626;
  --hub-banner-bg: #eff6ff;
  --hub-banner-border: #93c5fd;
  --hub-banner-text: #1e40af;
  --hub-modal-backdrop: rgba(15, 23, 42, 0.45);
  --hub-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hub-accent) 28%, transparent);

  /* Shape scanning + legacy aliases */
  --bg: var(--hub-bg);
  --panel: var(--hub-surface);
  --ink: var(--hub-ink);
  --muted: var(--hub-muted);
  --line: var(--hub-border-strong);
  --accent: var(--hub-accent);
  --good: var(--hub-good);
  --bad: var(--hub-bad);
  --soft-good: var(--hub-good-soft);
  --soft-bad: var(--hub-bad-soft);

  --shape-fill: #ffffff;
  --shape-stroke: #111827;
  --shape-label: #1f2937;

  --net-cell-bg: #ffffff;
  --net-cell-border: #111827;
  --net-stage-bg: #ffffff;
  --net-stage-border: #9ca3af;
}

html.dark {
  color-scheme: dark;

  --bg: #0c0e14;
  --panel: #171b26;
  --ink: #e8edf5;
  --muted: #94a3b8;
  --line: #475569;
  --accent: #3b82f6;
  --good: #4ade80;
  --bad: #f87171;
  --soft-good: #14532d;
  --soft-bad: #7f1d1d;

  --hub-bg: #0c0e14;
  --hub-bg-gradient: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(37, 99, 235, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #0f1219 0%, #0c0e14 100%);
  --hub-surface: #171b26;
  --hub-surface-muted: #1e2433;
  --hub-surface-elevated: #1c2230;
  --hub-border: #2d3748;
  --hub-border-strong: #3d4a61;
  --hub-ink: #e8edf5;
  --hub-muted: #94a3b8;
  --hub-accent: #3b82f6;
  --hub-accent-hover: #60a5fa;
  --hub-accent-soft: #172554;
  --hub-accent-soft-border: #1d4ed8;
  --hub-accent-text: #93c5fd;
  --hub-input-bg: #1e2433;
  --hub-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --hub-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
  --hub-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
  --hub-good: #4ade80;
  --hub-good-soft: #14532d;
  --hub-bad: #f87171;
  --hub-bad-soft: #7f1d1d;
  --hub-timer-low-bg: #450a0a;
  --hub-timer-low-border: #7f1d1d;
  --hub-timer-low-text: #fca5a5;
  --hub-banner-bg: #172554;
  --hub-banner-border: #1d4ed8;
  --hub-banner-text: #93c5fd;
  --hub-modal-backdrop: rgba(0, 0, 0, 0.65);

  --shape-fill: #f1f5f9;
  --shape-stroke: #64748b;
  --shape-label: #0f172a;

  --net-cell-bg: #3d4a61;
  --net-cell-border: #cbd5e1;
  --net-stage-bg: #1e2433;
  --net-stage-border: #64748b;
}

/* ── Global base ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--hub-ink);
  background: var(--hub-bg);
}

body.hub-page,
.login-app {
  background: var(--hub-bg-gradient);
  background-color: var(--hub-bg);
}

/* ── Shape scanning (hub tab) ──────────────────────────────────────────────── */
html.dark select,
html.dark button.secondary {
  background: var(--hub-input-bg);
  border-color: var(--hub-border);
  color: var(--ink);
}

html.dark .panel,
html.dark .instructions {
  border-color: var(--hub-border);
  background: var(--panel);
}

html.dark .instructions-content {
  color: var(--muted);
}

html.dark .panel-title {
  color: var(--muted);
  border-color: var(--hub-border);
}

html.dark .shape-board {
  background: var(--panel);
}

html.dark #tab-shape .shape,
html.dark #tab-shape .answer-target {
  color: var(--shape-label);
}

html.dark #tab-shape .shape .code,
html.dark #tab-shape .answer-target .code {
  color: var(--shape-label);
  font-weight: 600;
}

html.dark #tab-shape .shape-board svg circle,
html.dark #tab-shape .shape-board svg rect,
html.dark #tab-shape .shape-board svg polygon,
html.dark #tab-shape .answers svg circle,
html.dark #tab-shape .answers svg rect,
html.dark #tab-shape .answers svg polygon {
  fill: var(--shape-fill) !important;
  stroke: var(--shape-stroke) !important;
}

html.dark .answer-row input {
  background: var(--hub-input-bg);
  border-color: var(--hub-border);
  color: var(--ink);
}

html.dark .answer-row input:disabled {
  background: var(--hub-surface-muted);
  color: var(--muted);
}

html.dark .screen-warning {
  background: #422006;
  border-color: #b45309;
  color: #fde68a;
}

/* ── Game-specific dark tweaks ─────────────────────────────────────────────── */
html.dark .dev-choice {
  border-color: var(--hub-border-strong);
}

html.dark .dev-choice.is-correct {
  background: var(--hub-good-soft);
  border-color: var(--hub-good);
  color: var(--hub-ink);
}

html.dark .dev-choice.is-wrong {
  background: var(--hub-bad-soft);
  border-color: var(--hub-bad);
  color: var(--hub-ink);
}

html.dark .approx-q-btn.is-correct,
html.dark .approx-q-btn.is-wrong {
  color: #fff;
}

/* Cube unfold */
html.dark .cube-unfold-game .cu-reference,
html.dark .cube-unfold-game .cu-answers-panel {
  background: var(--hub-surface-muted);
  border-color: var(--hub-border);
}

html.dark .cube-unfold-game .cu-eyebrow,
html.dark .cube-unfold-game .cu-lead,
html.dark .cube-unfold-game .cu-hint {
  color: var(--hub-muted);
}

html.dark .cube-unfold-game .cu-reference h3,
html.dark .cube-unfold-game .cu-answers-title {
  color: var(--hub-ink);
}

html.dark .cube-stage {
  background: var(--net-stage-bg);
  border-color: var(--net-stage-border);
}

html.dark .cube-scene .face {
  background: var(--hub-surface);
  color: var(--hub-ink);
  border-color: var(--hub-ink);
}

html.dark .cube-unfold-game button.cu-net-option {
  background: var(--hub-input-bg);
  color: var(--hub-ink);
  border-color: var(--hub-border);
}

html.dark .cube-unfold-game button.cu-net-option:hover:not(:disabled):not(.is-correct):not(.is-wrong) {
  background: var(--hub-surface-muted);
}

html.dark .cube-net .cell {
  background: var(--net-cell-bg);
  color: var(--hub-ink);
  border-color: var(--net-cell-border);
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.12);
}

/* Grid memory */
html.dark .grid-memory-game .gm-phase-label {
  color: var(--hub-muted);
}

html.dark .grid-memory-game .gm-timer-display {
  color: var(--hub-ink);
}

html.dark .gm-grid-wrap {
  background: var(--hub-surface-muted);
  border-color: var(--hub-border);
}

html.dark .gm-grid-cover {
  background: rgba(12, 14, 20, 0.88);
  border-color: var(--hub-border);
}

html.dark .gm-grid-cover p {
  color: var(--hub-muted);
}

html.dark .gm-grid-cover strong {
  color: var(--hub-ink);
}

html.dark .gm-cell {
  background: var(--hub-input-bg);
  color: var(--hub-ink);
}

html.dark .grid-memory-game button.gm-choice {
  background: var(--hub-input-bg);
  color: var(--hub-ink);
  border-color: var(--hub-border);
}

html.dark .gm-quiz-card {
  background: var(--hub-surface);
  border-color: var(--hub-border);
  box-shadow: var(--hub-shadow-sm);
}

html.dark .gm-math .gm-prompt,
html.dark .gm-quiz .gm-prompt {
  color: var(--hub-muted);
}

html.dark .gm-math-input {
  background: var(--hub-input-bg);
  border-color: var(--hub-border);
  color: var(--hub-ink);
}

html.dark .gm-math-input:disabled {
  background: var(--hub-surface-muted);
  color: var(--hub-muted);
}

html.dark .gm-math-input-label,
html.dark .gm-math-feedback {
  color: var(--hub-muted);
}

html.dark .gm-cell-ref {
  background: #164e63;
  border-color: #0891b2;
  color: #a5f3fc;
}

html.dark .cube-option-label {
  background: var(--hub-surface-muted);
  border-color: var(--hub-border-strong);
  color: var(--hub-ink);
}

/* Cube folding */
html.dark .cube-folding-game .cf-reference,
html.dark .cube-folding-game .cf-answers-panel {
  background: var(--hub-surface-muted);
  border-color: var(--hub-border);
}

html.dark .cube-folding-game .cf-eyebrow,
html.dark .cube-folding-game .cf-lead,
html.dark .cube-folding-game .cf-hint {
  color: var(--hub-muted);
}

html.dark .cube-folding-game .cf-reference h3,
html.dark .cube-folding-game .cf-answers-title {
  color: var(--hub-ink);
}

html.dark .cube-folding-game .cf-net-stage {
  background: var(--net-stage-bg);
  border-color: var(--net-stage-border);
}

html.dark .cube-folding-game .cf-option-stage {
  background: var(--hub-input-bg);
  border-color: var(--hub-border);
}

html.dark .cube-folding-game button.cf-cube-option {
  background: var(--hub-input-bg);
  color: var(--hub-ink);
  border-color: var(--hub-border);
}

html.dark .cube-folding-game button.cf-cube-option:hover:not(:disabled):not(.is-correct):not(.is-wrong) {
  background: var(--hub-surface-muted);
}

html.dark .cube-folding-game .cf-cube-scene .face {
  background: var(--hub-surface);
  color: var(--hub-ink);
  border-color: var(--hub-ink);
}

html.dark .cube-folding-game .cf-reference-net.cube-net .cell {
  background: var(--net-cell-bg);
  color: var(--hub-ink);
  border-color: var(--net-cell-border);
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.12);
}

/* Records charts */
html.dark .graph-grid {
  stroke: #374151;
}

html.dark .graph-axis {
  stroke: #4b5563;
}

html.dark .graph-dot {
  fill: var(--hub-surface);
}

/* Login payment panel */
html.dark .payment-panel {
  background: #422006;
  border-color: #92400e;
}

html.dark .payment-message {
  color: #fde68a;
}

html.dark .payment-qr {
  border-color: var(--hub-border);
  background: var(--hub-surface);
}