@dataengineeringformachinelearning/viking-ui 4.0.6 → 4.1.1

package/dist/design-tokens.css

@@ -1,903 +0,0 @@
-@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 Martin x The Northman battlefield) ──── */
-  --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 — tactile 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-card-content-gap: var(--viking-space-3);
-  --viking-card-content-gap-compact: var(--viking-space-2);
-  --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: 28%;
-  /* ── 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);
-}