/* ── Global theme variables (settings-controlled) ─── */
:root {
  --bg: #ffffff;
  --fg: #202124;
  --muted: #5f6368;
  --border: #e8eaed;
  --accent: #1a73e8;
  --accent-2: #4285f4;
  --accent-dim: rgba(26, 115, 232, 0.25);
  --surface: #ffffff;
  --surface-alt: #fafbfc;
  --surface-hi: #fafbfc;
  --gold: var(--accent, #1a73e8);
  --gold-hi: var(--accent-2, #4285f4);
  --gold-dim: var(--accent-dim, rgba(26, 115, 232, 0.25));
  --text: #202124;
  --text-dim: #5f6368;
  --text-muted: #9aa0a6;
  --base-font-size: 16px;
  --radius: 14px;
  --font-scale: 1;
}

html {
  font-size: calc(16px * var(--font-scale));
}

* {
  --scaled-unit: calc(1px * var(--font-scale));
  --scaled-px2: calc(2px * var(--font-scale));
  --scaled-px4: calc(4px * var(--font-scale));
  --scaled-px6: calc(6px * var(--font-scale));
  --scaled-px8: calc(8px * var(--font-scale));
  --scaled-px10: calc(10px * var(--font-scale));
  --scaled-px12: calc(12px * var(--font-scale));
  --scaled-px14: calc(14px * var(--font-scale));
  --scaled-px16: calc(16px * var(--font-scale));
  --scaled-px18: calc(18px * var(--font-scale));
  --scaled-px20: calc(20px * var(--font-scale));
  --scaled-px24: calc(24px * var(--font-scale));
  --scaled-px28: calc(28px * var(--font-scale));
  --scaled-px32: calc(32px * var(--font-scale));
  --scaled-px40: calc(40px * var(--font-scale));
}

body.theme-dark {
  --bg: #0e1116;
  --fg: #e6e6e6;
  --muted: #a8adb5;
  --border: #2a2f3a;
  --surface: #141821;
  --surface-alt: #1a1f2a;
  --surface-hi: #1f2531;
  --text: #e6e6e6;
  --text-dim: #a8adb5;
  --text-muted: #808891;
  --accent-dim: rgba(66, 133, 244, 0.2);
  --gold-dim: var(--accent-dim);
}