:root, [data-theme="dark"] {
  --bg: #06110d; --bg-2: #091812; --surface: #0c1d17; --surface-2: #11271f;
  --line: #173328; --line-2: #21463a; --line-control: #40735f;
  --fg: #eaf3ee; --fg-2: #a7bdb3; --fg-3: #7a958a;
  --accent: #22b97c; --accent-2: #5fe3a8; --accent-ink: #02130c;
  --champ: #cdb57e; --champ-ink: #1a1405;
  --up: #4fdc9d; --down: #ef7363; --warn: #e5b54a; --info: #5aa9d6;
  --shadow-panel: 0 20px 40px -24px rgba(0,0,0,0.8);
  --shadow-glow: 0 6px 22px -6px rgba(34,185,124,0.53);
  --shadow-pop: 0 20px 40px -10px rgba(0,0,0,0.8);
  /* tints and glows used by backgrounds, bars and highlights (change these with the brand colour) */
  --accent-tint: rgba(34,185,124,.08); --accent-soft: rgba(34,185,124,.14); --champ-tint: rgba(205,181,126,.10);
  --glow-1: rgba(15,90,60,.38); --glow-2: rgba(11,61,43,.45); --glow-3: rgba(15,90,60,.55);
  --auth-from: #08201a; --auth-to: #050d0a;
  --topbar-bg: rgba(6,17,13,.86); --tabbar-bg: rgba(6,17,13,.96); --overlay-bg: rgba(6,17,13,.7); --surface-a60: rgba(12,29,23,.6);
  --chart-line: var(--accent-2); --chart-area: var(--accent); /* lines and fills of all charts */
  --chart-bg: rgba(12,29,23,1); --chart-grid: rgba(33,70,58,0.45);
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;
  --font-serif: var(--font-sans); /* headings; same Thai font as body (admin can change it) */
  --font-display: var(--font-serif);
  --font-sans: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Anuphan", ui-monospace, Menlo, Consolas, monospace;
  --font-wordmark: Unbounded, "Anuphan", system-ui, sans-serif;
}