/**
 * CSMBAC theme tokens — dark default, light via html[data-theme="light"].
 * Load first in every page head (before component CSS).
 */
html {
  color-scheme: dark;
  --bg: #050505;
  --surface: #0a0a0a;
  --surface-band: #101014;
  --surface-hover: #111111;
  --surface-elevated: #0f0f12;
  --panel-bg: rgb(0 0 0 / 62%);
  --panel-bg-hover: rgb(0 0 0 / 72%);
  --panel-bg-inset: rgb(0 0 0 / 40%);
  --bg-fx-opacity: 0.55;
  --hz-opacity: 0.4;
  --hz-opacity-revealed: 0.5;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --text-main: #ededed;
  --text-muted: #a1a1aa;
  --chrome-fg: #f1f5f9;
  --chrome-fg-muted: rgba(255, 255, 255, 0.66);
  --nav-backdrop: rgba(5, 5, 5, 0.7);
  --frame-bg: #030608;
  --footer-bg: #080808;
  --footer-bg-top: rgba(255, 255, 255, 0.04);
  --site-rail-border: rgba(255, 255, 255, 0.06);
  --section-bg-base: #050508;
  --section-bg-band: #101014;
  --section-border: rgba(255, 255, 255, 0.06);
  --link-uk: #ddd6fe;
  --link-za: #6ee7b7;
  --link-us: #bae6fd;
  --link-neutral: #e2e8f0;
  --pill-bg: rgb(0 0 0 / 62%);
  --pill-border: rgba(255, 255, 255, 0.14);
  --pill-text: var(--link-neutral);
  --pill-hover-bg: rgb(0 0 0 / 72%);
  --pill-hover-border: rgba(255, 255, 255, 0.28);
  --btn-secondary-bg: #050505;
  --btn-secondary-fg: #ffffff;
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.38);
  --mobile-menu-bg: rgba(5, 5, 5, 0.96);
  --mobile-menu-border: rgba(255, 255, 255, 0.1);
  --content-link-bg: #3b82f61c;
  --content-link-border: rgba(255, 255, 255, 0.22);
  --content-link-text: #e2e8f0;
  --accent: #34d399;
  --btn-primary-bg: #34d399;
  --btn-primary-fg: #fff;
  --glow: rgba(255, 255, 255, 0.1);
  --pkg-cta-graphite: linear-gradient(145deg, #12141a 0%, #2a2e38 36%, #4e5563 58%, #8b93a1 78%, #3a3f4a 100%);
  --pkg-cta-graphite-hover: linear-gradient(145deg, #1a1d24 0%, #353a46 36%, #5f6778 58%, #a8b0bc 82%, #454b58 100%);
  --pkg-cta-graphite-border: rgba(255, 255, 255, 0.34);
  --pkg-cta-graphite-shadow: 0 4px 16px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.38);
  --pkg-cta-graphite-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.42), 0 0 18px rgba(148, 163, 184, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.32);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f8f7f4;
  --surface-band: #f0eeea;
  --surface-hover: #ebe8e3;
  --surface-elevated: #ffffff;
  --panel-bg: rgb(255 255 255 / 92%);
  --panel-bg-hover: rgb(255 255 255 / 96%);
  --panel-bg-inset: rgb(248 247 244 / 88%);
  --bg-fx-opacity: 0.18;
  --hz-opacity: 0.12;
  --hz-opacity-revealed: 0.18;
  --border: rgba(15, 23, 42, 0.1);
  --border-hover: rgba(15, 23, 42, 0.18);
  --text-main: #111118;
  --text-muted: #52525b;
  --chrome-fg: #1e293b;
  --chrome-fg-muted: #64748b;
  --nav-backdrop: rgba(255, 255, 255, 0.88);
  --frame-bg: #f1f5f9;
  --footer-bg: #f5f5f5;
  --footer-bg-top: rgba(15, 23, 42, 0.04);
  --site-rail-border: rgba(15, 23, 42, 0.08);
  --section-bg-base: #ffffff;
  --section-bg-band: #f0eeea;
  --section-border: rgba(15, 23, 42, 0.08);
  --link-uk: #5b21b6;
  --link-za: #047857;
  --link-us: #0369a1;
  --link-neutral: #334155;
  --pill-bg: rgb(255 255 255 / 88%);
  --pill-border: rgba(15, 23, 42, 0.12);
  --pill-text: var(--link-neutral);
  --pill-hover-bg: rgb(248 250 252 / 96%);
  --pill-hover-border: rgba(15, 23, 42, 0.2);
  --btn-secondary-bg: #f1f5f9;
  --btn-secondary-fg: #0f172a;
  --shadow-elevated: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 2px 12px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --mobile-menu-bg: rgba(255, 255, 255, 0.97);
  --mobile-menu-border: rgba(15, 23, 42, 0.1);
  --content-link-bg: color-mix(in srgb, #3b82f6 10%, transparent);
  --content-link-border: rgba(59, 130, 246, 0.22);
  --content-link-text: #1e40af;
  --accent: #059669;
  --btn-primary-bg: #059669;
  --btn-primary-fg: #ffffff;
  --glow: rgba(15, 23, 42, 0.06);
  --pkg-cta-graphite: linear-gradient(145deg, #1e293b 0%, #334155 36%, #64748b 58%, #94a3b8 78%, #475569 100%);
  --pkg-cta-graphite-hover: linear-gradient(145deg, #0f172a 0%, #1e293b 36%, #475569 58%, #cbd5e1 82%, #334155 100%);
  --pkg-cta-graphite-border: rgba(15, 23, 42, 0.2);
  --pkg-cta-graphite-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --pkg-cta-graphite-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.16), 0 0 12px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}