@dataengineeringformachinelearning/viking-ui 1.0.1 → 3.0.0-alpha.2

package/dist/design-tokens.css

@@ -0,0 +1,688 @@
+@charset "UTF-8";
+/*! DEML Design Tokens — compiled from Viking-UI canonical tokens.
+ *  Static CSS: npm run build:viking-ui:package */
+/*! DEML Design Tokens — canonical source: packages/viking-ui/src/styles/_variables.scss
+ *  Static CSS: npm run build:viking-ui:package (or python scripts/sync_design_system.py) */
+:root {
+  color-scheme: dark light;
+  /* ── Deep navy surfaces (Lockheed × SpaceX precision aesthetic) ──────── */
+  --viking-navy-1000: #01030a;
+  --viking-navy-950: #030818;
+  --viking-navy-900: #0a1024;
+  --viking-navy-800: #101b33;
+  --viking-navy-700: #162544;
+  --viking-navy-600: #1e3054;
+  --viking-navy-500: #284068;
+  --viking-navy-400: #39547f;
+  --viking-navy-300: #58719e;
+  --viking-navy-200: #8fa2c2;
+  --viking-navy-100: #d7e0ef;
+  /* ── Electric blue accents (primary CTA, focus, links) ───────────────── */
+  --viking-electric-900: #04225f;
+  --viking-electric-800: #073a99;
+  --viking-electric-700: #0a4fd4;
+  --viking-electric-600: #1565f0;
+  --viking-electric-500: #2176ff;
+  --viking-electric-400: #4d94ff;
+  --viking-electric-300: #7ab0ff;
+  --viking-electric-200: #b6d3ff;
+  --viking-electric-100: #e7f1ff;
+  /* ── Charcoal surfaces (legacy alias — maps to navy in semantic tokens) ─ */
+  --viking-charcoal-950: var(--viking-navy-950);
+  --viking-charcoal-900: var(--viking-navy-900);
+  --viking-charcoal-800: var(--viking-navy-800);
+  --viking-charcoal-700: var(--viking-navy-700);
+  --viking-charcoal-600: var(--viking-navy-600);
+  --viking-charcoal-500: var(--viking-navy-500);
+  --viking-charcoal-400: var(--viking-navy-400);
+  --viking-charcoal-300: var(--viking-navy-300);
+  --viking-charcoal-200: var(--viking-navy-200);
+  --viking-charcoal-100: var(--viking-navy-100);
+  /* ── Metallic accents (borders, dividers, subtle depth) ────────────────── */
+  --viking-metallic-600: #555555;
+  --viking-metallic-500: #666666;
+  --viking-metallic-400: #777777;
+  --viking-metallic-300: #999999;
+  --viking-metallic-200: #aaaaaa;
+  --viking-metallic-100: #bbbbbb;
+  --viking-metallic-050: #e6e8ec;
+  /* ── Primary accent — electric blue (CTAs, focus, links) ───────────────── */
+  --viking-teal-700: var(--viking-electric-700);
+  --viking-teal-600: var(--viking-electric-600);
+  --viking-teal-500: var(--viking-electric-500);
+  --viking-teal-400: var(--viking-electric-400);
+  --viking-teal-300: var(--viking-electric-300);
+  /* ── Secondary accent — rich crimson (emphasis, destructive) ───────────── */
+  --viking-crimson-700: #7a2231;
+  --viking-crimson-600: #922b3e;
+  --viking-crimson-500: #a83344;
+  --viking-crimson-400: #c44355;
+  --viking-crimson-300: #dc6b78;
+  --viking-crimson-100: #fde8ec;
+  /* ── Refined accents — data, info, and product moments ────────────────── */
+  --viking-cyan-600: #168aad;
+  --viking-cyan-500: #1fa2c9;
+  --viking-cyan-400: #47bee0;
+  --viking-violet-600: #6f5bd7;
+  --viking-violet-500: #8674f0;
+  --viking-amber-600: #a77912;
+  --viking-amber-500: #d69e2e;
+  /* ── Status (refined for premium palette) ──────────────────────────────── */
+  --viking-green-500: #2a9d8f;
+  --viking-gold-500: #c4a035;
+  /* Info / chart series 6 — electric blue family */
+  --viking-blue-500: var(--viking-electric-400);
+  --viking-red-500: var(--viking-crimson-500);
+  /* ── Neutrals ──────────────────────────────────────────────────────────── */
+  --viking-ink-1000: #000000;
+  --viking-ink-950: #050609;
+  --viking-ink-900: #0c0f14;
+  --viking-ink-800: #151a22;
+  --viking-ink-700: #202735;
+  --viking-slate-100: #f4f7fb;
+  --viking-slate-050: #fbfcfe;
+  --viking-white: #f5f5f5;
+  --viking-white-pure: #ffffff;
+  --viking-black: #000000;
+  /* ── Spacing — 8px scale with 4px micro-grid aliases preserved ─────────── */
+  --viking-grid-unit: 4px;
+  --viking-space-unit: 8px;
+  --viking-space-0: 0;
+  --viking-space-px: 1px;
+  --viking-space-half: 4px;
+  --viking-space-0-5: 4px;
+  --viking-space-1: 8px;
+  --viking-space-1-5: 12px;
+  --viking-space-2: 16px;
+  --viking-space-2-5: 20px;
+  --viking-space-3: 24px;
+  --viking-space-4: 32px;
+  --viking-space-5: 40px;
+  --viking-space-6: 48px;
+  --viking-space-7: 56px;
+  --viking-space-8: 64px;
+  --viking-space-8-5: 72px;
+  --viking-space-9: 80px;
+  --viking-space-10: 96px;
+  --viking-space-11: 112px;
+  --viking-space-12: 128px;
+  --viking-space-14: 160px;
+  --viking-space-16: 192px;
+  --viking-space-20: 256px;
+  --viking-space-24: 320px;
+  /* ── Typography (Inter self-hosted — see _fonts.scss) ───────────────────── */
+  --viking-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --viking-font-family-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas,
+    monospace;
+  --viking-font-size-2xs: 11px;
+  --viking-font-size-xs: 12px;
+  --viking-font-size-sm: 14px;
+  --viking-font-size-base: 16px;
+  --viking-font-size-md: 18px;
+  --viking-font-size-lg: 20px;
+  --viking-font-size-xl: 24px;
+  --viking-font-size-2xl: 30px;
+  --viking-font-size-3xl: 36px;
+  --viking-font-size-4xl: 48px;
+  --viking-font-size-5xl: 60px;
+  --viking-font-size-6xl: 72px;
+  --viking-font-weight-regular: 400;
+  --viking-font-weight-medium: 500;
+  --viking-font-weight-semibold: 600;
+  --viking-font-weight-bold: 700;
+  --viking-font-weight-extrabold: 800;
+  --viking-line-height-none: 1;
+  --viking-line-height-tight: 1.25;
+  --viking-line-height-snug: 1.375;
+  --viking-line-height-normal: 1.5;
+  --viking-line-height-relaxed: 1.625;
+  --viking-line-height-loose: 1.75;
+  --viking-letter-spacing-tighter: -0.03em;
+  --viking-letter-spacing-tight: -0.02em;
+  --viking-letter-spacing-normal: 0;
+  --viking-letter-spacing-wide: 0.025em;
+  --viking-letter-spacing-wider: 0.05em;
+  --viking-letter-spacing-caps: 0.08em;
+  --viking-type-caption:
+    var(--viking-font-weight-medium) var(--viking-font-size-xs) /
+    var(--viking-line-height-normal) var(--viking-font-family);
+  --viking-type-body-sm:
+    var(--viking-font-weight-regular) var(--viking-font-size-sm) /
+    var(--viking-line-height-normal) var(--viking-font-family);
+  --viking-type-body:
+    var(--viking-font-weight-regular) var(--viking-font-size-base) /
+    var(--viking-line-height-normal) var(--viking-font-family);
+  --viking-type-body-lg:
+    var(--viking-font-weight-regular) var(--viking-font-size-md) /
+    var(--viking-line-height-relaxed) var(--viking-font-family);
+  --viking-type-heading-sm:
+    var(--viking-font-weight-semibold) var(--viking-font-size-lg) /
+    var(--viking-line-height-tight) var(--viking-font-family);
+  --viking-type-heading:
+    var(--viking-font-weight-bold) var(--viking-font-size-2xl) /
+    var(--viking-line-height-tight) var(--viking-font-family);
+  --viking-type-display:
+    var(--viking-font-weight-extrabold) var(--viking-font-size-4xl) /
+    var(--viking-line-height-none) var(--viking-font-family);
+  /* ── Border radius — 6–12px premium feel ─────────────────────────────────── */
+  --viking-radius-xs: 4px;
+  --viking-radius-sm: 6px;
+  --viking-radius: 8px;
+  --viking-radius-md: 10px;
+  --viking-radius-lg: 12px;
+  --viking-radius-xl: 16px;
+  --viking-radius-2xl: 24px;
+  --viking-radius-pill: 999px;
+  --viking-radius-full: var(--viking-radius-pill);
+  /* ── Elevation — soft shadows with subtle metallic top-edge ──────────────── */
+  --viking-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --viking-shadow-sm:
+    0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --viking-shadow-md:
+    0 2px 4px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  --viking-shadow-lg:
+    0 4px 8px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --viking-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.14);
+  --viking-shadow-hover:
+    0 8px 16px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --viking-shadow-focus: 0 0 0 var(--viking-ring-offset) var(--viking-bg),
+    0 0 0 calc(var(--viking-ring-offset) + var(--viking-ring-width)) var(--viking-ring);
+  --viking-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  /* ── Chart scale — unified responsive min/max (matches 720×240 SVG viewBox) ─ */
+  --viking-chart-ratio: 3 / 1;
+  --viking-chart-min-height: clamp(9.5rem, 22vw, 12rem);
+  --viking-chart-max-height: clamp(13rem, 36vw, 17.5rem);
+  --viking-chart-fill-min-height: clamp(18rem, 36vw, 20rem);
+  --viking-chart-fill-max-height: none;
+  --viking-chart-fill-min-height-lg: clamp(20rem, 40vw, 22rem);
+  --viking-chart-fill-max-height-lg: none;
+  --viking-chart-empty-min-height: var(--viking-chart-fill-min-height);
+  --viking-chart-empty-min-height-lg: var(--viking-chart-fill-min-height-lg);
+  --viking-chart-panel-min-height-md: 26rem;
+  --viking-chart-panel-min-height-lg: 30rem;
+  --viking-chart-panel-body-min-height-md: 22rem;
+  --viking-chart-panel-body-min-height-lg: 25rem;
+  --viking-chart-sparkline-height: 2.5rem;
+  --viking-chart-map-min-height: 22.5rem;
+  /* ── Breakpoints (mobile-first) ─────────────────────────────────────────── */
+  --viking-bp-sm: 600px;
+  --viking-bp-md: 768px;
+  --viking-bp-sidebar: 901px;
+  --viking-bp-lg: 1024px;
+  --viking-bp-xl: 1440px;
+  --viking-bp-2xl: 1920px;
+  /* ── Motion ──────────────────────────────────────────────────────────────── */
+  --viking-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --viking-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --viking-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --viking-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --viking-duration-instant: 75ms;
+  --viking-duration-fast: 150ms;
+  --viking-duration: 250ms;
+  --viking-duration-slow: 350ms;
+  --viking-duration-slower: 500ms;
+  --viking-transition-colors:
+    color var(--viking-duration) var(--viking-ease-default),
+    background-color var(--viking-duration) var(--viking-ease-default),
+    border-color var(--viking-duration) var(--viking-ease-default),
+    box-shadow var(--viking-duration) var(--viking-ease-default),
+    fill var(--viking-duration) var(--viking-ease-default),
+    stroke var(--viking-duration) var(--viking-ease-default);
+  --viking-transition-interactive:
+    color var(--viking-duration) var(--viking-ease-default),
+    background-color var(--viking-duration) var(--viking-ease-default),
+    border-color var(--viking-duration) var(--viking-ease-default),
+    box-shadow var(--viking-duration) var(--viking-ease-default),
+    fill var(--viking-duration) var(--viking-ease-default),
+    stroke var(--viking-duration) var(--viking-ease-default),
+    transform var(--viking-duration) var(--viking-ease-default),
+    opacity var(--viking-duration) var(--viking-ease-default);
+  --viking-transition: all var(--viking-duration) var(--viking-ease-default);
+  --viking-transition-fast: all var(--viking-duration-fast) var(--viking-ease-default);
+  --viking-transition-transform: transform var(--viking-duration) var(--viking-ease-emphasized);
+  /* ── Interactive state ───────────────────────────────────────────────────── */
+  --viking-state-hover-lift: -1px;
+  --viking-state-active-scale: 0.985;
+  --viking-state-disabled-opacity: 0.48;
+  /* ── Controls ──────────────────────────────────────────────────────────── */
+  --viking-control-height: 44px;
+  --viking-control-height-sm: 32px;
+  --viking-control-height-xs: 24px;
+  --viking-touch-target-min: 44px;
+  --viking-control-padding-x: var(--viking-space-2);
+  --viking-btn-min-width: 120px;
+  --viking-select-panel-bg: var(--viking-surface-raised);
+  --viking-select-half-max-width: min(100%, 24rem);
+  /* ── Layout ────────────────────────────────────────────────────────────── */
+  --viking-container-max-width: 1260px;
+  --viking-navbar-height: 64px;
+  --viking-sidebar-width: 256px;
+  /* ── Layout rhythm — premium spacing enforcement (THEME.md §3) ─────────── */
+  --viking-page-gutter: var(--viking-space-3);
+  --viking-page-gutter-lg: var(--viking-space-4);
+  --viking-page-gutter-xl: var(--viking-space-6);
+  --viking-page-stack-gap: var(--viking-space-4);
+  --viking-page-section-gap: var(--viking-space-6);
+  --viking-section-padding-y: var(--viking-space-8);
+  --viking-section-padding-y-compact: var(--viking-space-5);
+  --viking-card-padding: var(--viking-space-4);
+  --viking-card-padding-compact: var(--viking-space-3);
+  --viking-panel-padding: var(--viking-space-4);
+  --viking-panel-header-padding: var(--viking-space-3) var(--viking-space-4);
+  --viking-form-max-width: 42rem;
+  --viking-form-narrow-max-width: 28rem;
+  --viking-content-readable-max-width: 48rem;
+  --viking-card-min-width: 0;
+  --viking-card-max-width: none;
+  --viking-metric-card-min-height: 6.5rem;
+  --viking-metric-card-tall-min-height: 8.25rem;
+  --viking-metric-card-min-width: 10rem;
+  --viking-surface-hairline-strength: 22%;
+  /* ── Layering ────────────────────────────────────────────────────────────── */
+  --viking-z-overlay: 1000;
+  --viking-z-toast: 1100;
+  --viking-z-tooltip: 1200;
+  /* ── Chart ───────────────────────────────────────────────────────────────── */
+  --viking-chart-axis-size: 12px;
+  /* ── Icons ─────────────────────────────────────────────────────────────────── */
+  --viking-icon-size-sm: 16px;
+  --viking-icon-size-md: 20px;
+  --viking-icon-size-lg: 24px;
+  --viking-icon-stroke-width: 1.75;
+  --viking-icon-stroke-width-sm: 1.5;
+}
+
+/* ── Dark mode (default) ─────────────────────────────────────────────────── */
+:root,
+html[data-theme=dark] {
+  color-scheme: dark;
+  --viking-bg: var(--viking-charcoal-900);
+  --viking-bg-subtle: var(--viking-ink-950);
+  --viking-bg-inverted: var(--viking-white-pure);
+  --viking-surface: var(--viking-charcoal-800);
+  --viking-surface-alt: var(--viking-charcoal-700);
+  --viking-surface-inset: var(--viking-charcoal-950);
+  --viking-surface-raised: var(--viking-charcoal-600);
+  --viking-surface-overlay: var(--viking-ink-800);
+  --viking-text: var(--viking-white);
+  --viking-text-muted: var(--viking-metallic-200);
+  --viking-text-subtle: var(--viking-metallic-300);
+  --viking-text-disabled: var(--viking-metallic-400);
+  --viking-text-link: var(--viking-electric-300);
+  --viking-text-link-hover: var(--viking-electric-200);
+  --viking-text-inverted: var(--viking-charcoal-900);
+  --viking-border: color-mix(in srgb, var(--viking-metallic-600) 48%, transparent);
+  --viking-border-strong: color-mix(in srgb, var(--viking-metallic-400) 68%, transparent);
+  --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 28%, transparent);
+  --viking-border-accent: color-mix(in srgb, var(--viking-electric-500) 72%, transparent);
+  --viking-accent: var(--viking-electric-500);
+  --viking-accent-hover: var(--viking-electric-400);
+  --viking-accent-active: var(--viking-electric-700);
+  --viking-accent-content: var(--viking-white-pure);
+  --viking-accent-soft: color-mix(in srgb, var(--viking-electric-500) 18%, transparent);
+  --viking-accent-muted: color-mix(in srgb, var(--viking-electric-500) 10%, transparent);
+  --viking-accent-strong: var(--viking-electric-300);
+  --viking-accent-secondary: var(--viking-crimson-600);
+  --viking-accent-secondary-hover: var(--viking-crimson-500);
+  --viking-accent-secondary-active: var(--viking-crimson-700);
+  --viking-accent-secondary-content: var(--viking-white-pure);
+  --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-crimson-600) 16%, transparent);
+  --viking-success: var(--viking-green-500);
+  --viking-success-soft: color-mix(in srgb, var(--viking-green-500) 14%, transparent);
+  --viking-warning: var(--viking-gold-500);
+  --viking-warning-soft: color-mix(in srgb, var(--viking-gold-500) 16%, transparent);
+  --viking-danger: var(--viking-crimson-500);
+  --viking-danger-soft: color-mix(in srgb, var(--viking-crimson-500) 16%, transparent);
+  --viking-info: var(--viking-blue-500);
+  --viking-info-soft: color-mix(in srgb, var(--viking-blue-500) 14%, transparent);
+  --viking-danger-text: var(--viking-crimson-400);
+  --viking-on-danger: var(--viking-white-pure);
+  --viking-ring: var(--viking-electric-400);
+  --viking-ring-width: 2px;
+  --viking-ring-offset: 2px;
+  --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-950) 72%, transparent);
+  --viking-surface-glass: color-mix(in srgb, var(--viking-charcoal-800) 82%, transparent);
+  --viking-surface-glass-blur: 12px;
+  --viking-state-hover-bg: color-mix(in srgb, var(--viking-electric-500) 10%, transparent);
+  --viking-state-active-bg: color-mix(in srgb, var(--viking-electric-700) 14%, transparent);
+  --viking-state-selected-bg: color-mix(in srgb, var(--viking-electric-500) 18%, transparent);
+  --viking-state-disabled-bg: color-mix(in srgb, var(--viking-metallic-600) 20%, transparent);
+  --viking-shadow-sm:
+    0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --viking-shadow-md:
+    0 2px 4px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  --viking-shadow-lg:
+    0 4px 8px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+/* ── Light mode ──────────────────────────────────────────────────────────── */
+html[data-theme=light] {
+  color-scheme: light;
+  --viking-bg: var(--viking-slate-050);
+  --viking-bg-subtle: var(--viking-slate-100);
+  --viking-bg-inverted: var(--viking-charcoal-900);
+  --viking-surface: var(--viking-white-pure);
+  --viking-surface-alt: var(--viking-slate-100);
+  --viking-surface-inset: var(--viking-metallic-050);
+  --viking-surface-raised: var(--viking-white-pure);
+  --viking-surface-overlay: var(--viking-white-pure);
+  --viking-text: var(--viking-charcoal-900);
+  --viking-text-muted: var(--viking-metallic-500);
+  --viking-text-subtle: var(--viking-metallic-400);
+  --viking-text-disabled: var(--viking-metallic-300);
+  --viking-text-link: var(--viking-electric-700);
+  --viking-text-link-hover: var(--viking-electric-600);
+  --viking-text-inverted: var(--viking-white-pure);
+  --viking-border: color-mix(in srgb, var(--viking-metallic-600) 32%, transparent);
+  --viking-border-strong: color-mix(in srgb, var(--viking-metallic-600) 48%, transparent);
+  --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 22%, transparent);
+  --viking-border-accent: color-mix(in srgb, var(--viking-electric-600) 58%, transparent);
+  --viking-accent: var(--viking-electric-600);
+  --viking-accent-hover: var(--viking-electric-500);
+  --viking-accent-active: var(--viking-electric-700);
+  --viking-accent-content: var(--viking-white-pure);
+  --viking-accent-soft: color-mix(in srgb, var(--viking-electric-600) 14%, transparent);
+  --viking-accent-muted: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
+  --viking-accent-strong: var(--viking-electric-400);
+  --viking-accent-secondary: var(--viking-crimson-700);
+  --viking-accent-secondary-hover: var(--viking-crimson-600);
+  --viking-accent-secondary-active: var(--viking-crimson-700);
+  --viking-accent-secondary-content: var(--viking-white-pure);
+  --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-crimson-700) 12%, transparent);
+  --viking-success-soft: color-mix(in srgb, var(--viking-green-500) 12%, transparent);
+  --viking-warning-soft: color-mix(in srgb, var(--viking-gold-500) 14%, transparent);
+  --viking-danger-soft: color-mix(in srgb, var(--viking-crimson-500) 12%, transparent);
+  --viking-info-soft: color-mix(in srgb, var(--viking-blue-500) 12%, transparent);
+  --viking-danger-text: var(--viking-crimson-700);
+  --viking-on-danger: var(--viking-white-pure);
+  --viking-ring: var(--viking-electric-500);
+  --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-900) 45%, transparent);
+  --viking-surface-glass: color-mix(in srgb, var(--viking-white-pure) 88%, transparent);
+  --viking-surface-glass-blur: 10px;
+  --viking-state-hover-bg: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
+  --viking-state-active-bg: color-mix(in srgb, var(--viking-electric-700) 12%, transparent);
+  --viking-state-selected-bg: color-mix(in srgb, var(--viking-electric-600) 14%, transparent);
+  --viking-state-disabled-bg: color-mix(in srgb, var(--viking-metallic-600) 12%, transparent);
+  --viking-shadow-sm:
+    0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
+  --viking-shadow-md:
+    0 2px 4px rgba(17, 17, 17, 0.06), 0 4px 8px rgba(17, 17, 17, 0.08);
+  --viking-shadow-lg:
+    0 4px 8px rgba(17, 17, 17, 0.06), 0 12px 24px rgba(17, 17, 17, 0.1);
+}
+
+/* Respect system preference when no explicit theme is set */
+@media (prefers-color-scheme: light) {
+  html:not([data-theme=dark]) {
+    color-scheme: light;
+    --viking-bg: var(--viking-slate-050);
+    --viking-bg-subtle: var(--viking-slate-100);
+    --viking-bg-inverted: var(--viking-charcoal-900);
+    --viking-surface: var(--viking-white-pure);
+    --viking-surface-alt: var(--viking-slate-100);
+    --viking-surface-inset: var(--viking-metallic-050);
+    --viking-surface-raised: var(--viking-white-pure);
+    --viking-surface-overlay: var(--viking-white-pure);
+    --viking-text: var(--viking-charcoal-900);
+    --viking-text-muted: var(--viking-metallic-500);
+    --viking-text-subtle: var(--viking-metallic-400);
+    --viking-text-disabled: var(--viking-metallic-300);
+    --viking-text-link: var(--viking-electric-700);
+    --viking-text-link-hover: var(--viking-electric-600);
+    --viking-text-inverted: var(--viking-white-pure);
+    --viking-border: color-mix(in srgb, var(--viking-metallic-600) 22%, transparent);
+    --viking-border-strong: color-mix(in srgb, var(--viking-metallic-600) 38%, transparent);
+    --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 12%, transparent);
+    --viking-border-accent: color-mix(in srgb, var(--viking-electric-600) 58%, transparent);
+    --viking-accent: var(--viking-electric-600);
+    --viking-accent-hover: var(--viking-electric-500);
+    --viking-accent-active: var(--viking-electric-700);
+    --viking-accent-content: var(--viking-white-pure);
+    --viking-accent-soft: color-mix(in srgb, var(--viking-electric-600) 10%, transparent);
+    --viking-accent-muted: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
+    --viking-accent-strong: var(--viking-electric-400);
+    --viking-accent-secondary: var(--viking-crimson-700);
+    --viking-accent-secondary-hover: var(--viking-crimson-600);
+    --viking-accent-secondary-active: var(--viking-crimson-700);
+    --viking-accent-secondary-content: var(--viking-white-pure);
+    --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-crimson-700) 8%, transparent);
+    --viking-success-soft: color-mix(in srgb, var(--viking-green-500) 12%, transparent);
+    --viking-warning-soft: color-mix(in srgb, var(--viking-gold-500) 14%, transparent);
+    --viking-danger-soft: color-mix(in srgb, var(--viking-crimson-500) 12%, transparent);
+    --viking-info-soft: color-mix(in srgb, var(--viking-blue-500) 12%, transparent);
+    --viking-danger-text: var(--viking-crimson-700);
+    --viking-on-danger: var(--viking-white-pure);
+    --viking-ring: var(--viking-electric-500);
+    --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-900) 45%, transparent);
+    --viking-surface-glass: color-mix(in srgb, var(--viking-white-pure) 88%, transparent);
+    --viking-surface-glass-blur: 10px;
+    --viking-state-hover-bg: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
+    --viking-state-active-bg: color-mix(in srgb, var(--viking-electric-700) 12%, transparent);
+    --viking-state-selected-bg: color-mix(in srgb, var(--viking-electric-600) 14%, transparent);
+    --viking-state-disabled-bg: color-mix(in srgb, var(--viking-metallic-600) 12%, transparent);
+    --viking-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
+    --viking-shadow-md: 0 2px 4px rgba(17, 17, 17, 0.06), 0 4px 8px rgba(17, 17, 17, 0.08);
+    --viking-shadow-lg: 0 4px 8px rgba(17, 17, 17, 0.06), 0 12px 24px rgba(17, 17, 17, 0.1);
+  }
+}
+:root {
+  --viking-series-1: var(--viking-electric-500);
+  --viking-series-2: var(--viking-crimson-600);
+  --viking-series-3: var(--viking-green-500);
+  --viking-series-4: var(--viking-gold-500);
+  --viking-series-5: var(--viking-crimson-500);
+  --viking-series-6: var(--viking-blue-500);
+  --viking-series-7: var(--viking-charcoal-700);
+  --viking-series-8: var(--viking-metallic-500);
+  --viking-series-default: var(--viking-series-1);
+  /* Premium palette v3 — electric primary, crimson secondary, semantic + muted slots */
+  --viking-series-palette: var(--viking-series-1), var(--viking-series-2),
+    var(--viking-series-3), var(--viking-series-4), var(--viking-series-5),
+    var(--viking-series-6), var(--viking-series-7), var(--viking-series-8);
+}
+
+:root {
+  /* Primitive aliases (short names used in older SCSS) */
+  --charcoal-950: var(--viking-charcoal-950);
+  --charcoal-900: var(--viking-charcoal-900);
+  --charcoal-800: var(--viking-charcoal-800);
+  --charcoal-700: var(--viking-charcoal-700);
+  --charcoal-600: var(--viking-charcoal-600);
+  --charcoal-500: var(--viking-charcoal-500);
+  --metallic-600: var(--viking-metallic-600);
+  --metallic-500: var(--viking-metallic-500);
+  --metallic-400: var(--viking-metallic-400);
+  --metallic-300: var(--viking-metallic-300);
+  --metallic-200: var(--viking-metallic-200);
+  --metallic-100: var(--viking-metallic-100);
+  --white: var(--viking-white-pure);
+  --black: var(--viking-black);
+  /* Typography floors */
+  --base-font-size: var(--viking-font-size-base);
+  --ui-font-size: var(--viking-font-size-sm);
+  --header-letter-spacing: var(--viking-letter-spacing-tight);
+  /* Spacing — legacy --space-N (4px grid) */
+  --grid-unit: var(--viking-grid-unit);
+  --space-0: var(--viking-space-0);
+  --space-half: var(--viking-space-half);
+  --space-0-5: var(--viking-space-0-5);
+  --space-1: var(--viking-space-1);
+  --space-1-5: var(--viking-space-1-5);
+  --space-2: var(--viking-space-2);
+  --space-2-5: var(--viking-space-2-5);
+  --space-3: var(--viking-space-3);
+  --space-4: var(--viking-space-4);
+  --space-5: var(--viking-space-5);
+  --space-6: var(--viking-space-6);
+  --space-7: var(--viking-space-7);
+  --space-8: var(--viking-space-8);
+  --space-8-5: var(--viking-space-8-5);
+  --space-9: var(--viking-space-9);
+  --space-10: var(--viking-space-10);
+  --space-11: var(--viking-space-11);
+  --space-12: var(--viking-space-12);
+  --space-14: var(--viking-space-14);
+  --space-16: var(--viking-space-16);
+  --space-20: var(--viking-space-20);
+  --space-24: var(--viking-space-24);
+  --grid-gap: var(--viking-space-3);
+  --card-padding: var(--viking-card-padding);
+  /* Layout rhythm aliases */
+  --page-gutter: var(--viking-page-gutter);
+  --page-gutter-lg: var(--viking-page-gutter-lg);
+  --page-stack-gap: var(--viking-page-stack-gap);
+  --page-section-gap: var(--viking-page-section-gap);
+  --form-max-width: var(--viking-form-max-width);
+  --form-narrow-max-width: var(--viking-form-narrow-max-width);
+  --content-readable-max-width: var(--viking-content-readable-max-width);
+  /* Layout */
+  --container-max-width: var(--viking-container-max-width);
+  --navbar-height: var(--viking-navbar-height);
+  --btn-min-width: var(--viking-btn-min-width);
+  /* Radii */
+  --border-radius-xs: var(--viking-radius-xs);
+  --border-radius-sm: var(--viking-radius-sm);
+  --border-radius-md: var(--viking-radius);
+  --border-radius-lg: var(--viking-radius-lg);
+  --border-radius-xl: var(--viking-radius-xl);
+  --border-radius-pill: var(--viking-radius-pill);
+  /* Motion & elevation */
+  --transition-smooth: var(--viking-transition);
+  --shadow-sm: var(--viking-shadow-sm);
+  --shadow-md: var(--viking-shadow-md);
+  --shadow-lg: var(--viking-shadow-lg);
+  --shadow-hover: var(--viking-shadow-hover);
+  /* Semantic short names */
+  --primary-color: var(--viking-electric-500);
+  --accent-color: var(--viking-crimson-600);
+  /* Focus */
+  --focus-ring-width: var(--viking-ring-width);
+  --focus-ring-offset: var(--viking-ring-offset);
+}
+
+:root,
+html[data-theme=dark] {
+  --color-primary: var(--viking-electric-500);
+  --color-on-primary: var(--viking-white-pure);
+  --color-primary-container: var(--viking-electric-400);
+  --color-on-primary-container: var(--viking-charcoal-900);
+  --color-surface: var(--viking-charcoal-800);
+  --color-on-surface: var(--viking-white);
+  --color-background: var(--viking-charcoal-900);
+  --color-on-background: var(--viking-white);
+  --color-surface-variant: var(--viking-charcoal-700);
+  --color-success: var(--viking-green-500);
+  --color-warning: var(--viking-gold-500);
+  --color-error: var(--viking-crimson-500);
+  --color-info: var(--viking-blue-500);
+  --color-gauge-red: var(--color-error);
+  --border: var(--viking-border);
+  --border-layout: var(--viking-border-strong);
+  --hover-color: var(--viking-electric-400);
+  --bg-color: var(--viking-bg);
+  --text-color: var(--viking-text);
+  --text-muted: var(--viking-text-muted);
+  --card-bg: var(--viking-surface);
+  --navbar-bg: color-mix(in srgb, var(--viking-bg) 96%, transparent);
+  --link-color: var(--viking-electric-300);
+  --link-hover-color: var(--viking-electric-400);
+  --hero-title-color: var(--viking-white);
+  --primary-text-color: var(--viking-electric-300);
+  --button-primary: var(--color-primary);
+  --button-primary-text: var(--viking-white-pure);
+  --color-dark-grey-btn-bg: var(--viking-charcoal-700);
+  --color-dark-grey-btn-text: var(--viking-white);
+  --focus-ring-color: var(--viking-electric-400);
+}
+
+html[data-theme=light] {
+  --color-primary: var(--viking-electric-600);
+  --color-on-primary: var(--viking-white-pure);
+  --color-primary-container: var(--viking-teal-500);
+  --color-on-primary-container: var(--viking-white-pure);
+  --color-surface: var(--viking-white-pure);
+  --color-on-surface: var(--viking-charcoal-900);
+  --color-background: var(--viking-white-pure);
+  --color-on-background: var(--viking-charcoal-900);
+  --color-surface-variant: var(--viking-surface-alt);
+  --color-success: var(--viking-green-500);
+  --color-warning: var(--viking-gold-500);
+  --color-error: var(--viking-crimson-700);
+  --color-info: var(--viking-blue-500);
+  --color-gauge-red: var(--color-error);
+  --border: var(--viking-border);
+  --border-layout: var(--viking-border-strong);
+  --hover-color: var(--viking-electric-500);
+  --bg-color: var(--viking-bg);
+  --text-color: var(--viking-text);
+  --text-muted: var(--viking-text-muted);
+  --card-bg: var(--viking-surface);
+  --navbar-bg: color-mix(in srgb, var(--viking-white-pure) 96%, transparent);
+  --link-color: var(--viking-electric-700);
+  --link-hover-color: var(--viking-electric-600);
+  --hero-title-color: var(--viking-charcoal-900);
+  --primary-text-color: var(--viking-electric-700);
+  --button-primary: var(--color-primary);
+  --button-primary-text: var(--color-on-primary);
+  --color-dark-grey-btn-bg: var(--viking-charcoal-800);
+  --color-dark-grey-btn-text: var(--viking-white);
+  --focus-ring-color: var(--viking-electric-500);
+}
+
+@media (prefers-color-scheme: light) {
+  html:not([data-theme=dark]) {
+    --color-primary: var(--viking-electric-600);
+    --color-on-primary: var(--viking-white-pure);
+    --color-primary-container: var(--viking-teal-500);
+    --color-on-primary-container: var(--viking-white-pure);
+    --color-surface: var(--viking-white-pure);
+    --color-on-surface: var(--viking-charcoal-900);
+    --color-background: var(--viking-white-pure);
+    --color-on-background: var(--viking-charcoal-900);
+    --color-surface-variant: var(--viking-surface-alt);
+    --color-success: var(--viking-green-500);
+    --color-warning: var(--viking-gold-500);
+    --color-error: var(--viking-crimson-700);
+    --color-info: var(--viking-blue-500);
+    --color-gauge-red: var(--color-error);
+    --border: var(--viking-border);
+    --border-layout: var(--viking-border-strong);
+    --hover-color: var(--viking-electric-500);
+    --bg-color: var(--viking-bg);
+    --text-color: var(--viking-text);
+    --text-muted: var(--viking-text-muted);
+    --card-bg: var(--viking-surface);
+    --navbar-bg: color-mix(in srgb, var(--viking-white-pure) 96%, transparent);
+    --link-color: var(--viking-electric-700);
+    --link-hover-color: var(--viking-electric-600);
+    --hero-title-color: var(--viking-charcoal-900);
+    --primary-text-color: var(--viking-electric-700);
+    --button-primary: var(--color-primary);
+    --button-primary-text: var(--color-on-primary);
+    --color-dark-grey-btn-bg: var(--viking-charcoal-800);
+    --color-dark-grey-btn-text: var(--viking-white);
+    --focus-ring-color: var(--viking-electric-500);
+  }
+}
+body {
+  font-size: var(--base-font-size);
+  color: var(--text-color);
+  background-color: var(--bg-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  letter-spacing: var(--header-letter-spacing);
+}