:root, [data-theme="light"] {
  --brand: #4A2BC2;  /* Deep Violet. The logo, headings and the brand's voice on `surface`. On the dark theme it t */
  --band: #4A2BC2;  /* Deep Violet band: hero, footer, dark slides and every dark background. Never navy. Carries */
  --surface: #FFFFFF;  /* Page background. */
  --surface-alt: #F6F4FB;  /* Lilac Mist. Alternate sections, table headers, quiet panels. */
  --line: #E6E1F5;  /* Hairline rules, card and table borders (decorative, 1px). */
  --line-strong: #827C9E;  /* Input and control borders; holds 3:1 on `surface` and `surface-alt`. */
  --ink: #0A0F1E;  /* Body text on `surface` and `surface-alt`. */
  --ink-muted: #4A5E78;  /* Secondary text, captions, hints on `surface` and `surface-alt`. */
  --on-band: #FFFFFF;  /* Text and the white logo on `band`. */
  --on-band-muted: #DCD4FF;  /* Secondary text on `band`. */
  --action: #4A2BC2;  /* Primary buttons and links. HUXOS acts in its own violet. */
  --action-hover: #3B1FA6;  /* Hover and pressed state of `action`. */
  --on-action: #FFFFFF;  /* Label on an `action` fill. */
  --focus: #4A2BC2;  /* Focus ring: 2px solid, 2px offset, on every interactive element. */
  --success: #0F7B4B;  /* Success text and icons: saved, paid, live. Always with a word, never colour alone. */
  --warning: #8A5300;  /* Warning text and icons: pending, expiring, needs review. */
  --danger: #B3261E;  /* Error text, destructive buttons, invalid fields. */
  --info-soft: #EFEBFD;  /* Background of info alerts and badges. */
  --success-soft: #E8F5EF;  /* Background of success alerts and badges. */
  --warning-soft: #FDF3E2;  /* Background of warning alerts and badges. */
  --danger-soft: #FBEAE9;  /* Background of error alerts and badges. */
  --engine-spatial: #0EA5E9;  /* HUXOS Spatial. Engine dividers, chart series and small markers only; always next to the en */
  --engine-geoinsights: #EAB308;  /* HUXOS GeoInsights. Marker colour only; too light for text or thin lines on white. */
  --engine-fss: #14B8A6;  /* HUXOS FSS. Engine dividers, chart series and small markers only. */
  --engine-insights: #6C4DFF;  /* HUXOS Insights. Engine dividers, chart series and small markers only. */
  --engine-ask: #A855F7;  /* HUXOS Ask. Engine dividers, chart series and small markers only. */
  --engine-api: #2563EB;  /* HUXOS API Management. Engine dividers, chart series and small markers only. */
}
[data-theme="dark"] {
  --brand: #FFFFFF;
  --surface: #120C2E;
  --surface-alt: #1D1545;
  --line: #3A2F72;
  --line-strong: #8378B8;
  --ink: #FFFFFF;
  --ink-muted: #DCD4FF;
  --action: #B9A8FF;
  --action-hover: #D3C8FF;
  --on-action: #1A1240;
  --focus: #B9A8FF;
  --success: #5BD69C;
  --warning: #F5B546;
  --danger: #FF8A80;
  --info-soft: #2A1F63;
  --success-soft: #0E2F26;
  --warning-soft: #33270C;
  --danger-soft: #3A181C;
  --engine-spatial: #38BDF8;
  --engine-geoinsights: #FACC15;
  --engine-fss: #2DD4BF;
  --engine-insights: #9D87FF;
  --engine-ask: #C084FC;
  --engine-api: #6F9BFF;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --container: 1200px;
  --border-width: 1px;
  --focus-width: 2px;
  --header-height: 72px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --font-display: Montserrat, Arial, sans-serif;
  --font-sans: Inter, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}
@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url('../fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); }
.display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 800; }
.h3 { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 800; }
.overline { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }