@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/styles/_typography.scss

@@ -1,87 +0,0 @@
-// Global typography — Inter via self-hosted variable font (_fonts.scss).
-
-html {
-  font-family: var(--viking-font-family);
-  font-size: var(--viking-font-size, 16px);
-  line-height: var(--viking-line-height-relaxed, 1.625);
-  font-optical-sizing: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body,
-.viking-ui-body {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: var(--viking-font-weight-regular, 400);
-  color: var(--viking-text);
-  background-color: var(--viking-bg);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--viking-font-family);
-  font-weight: var(--viking-font-weight-semibold, 600);
-  line-height: var(--viking-line-height-tight, 1.25);
-  letter-spacing: var(--viking-letter-spacing-tight, -0.02em);
-}
-
-h1 {
-  font-size: var(--viking-font-size-2xl, 30px);
-  font-weight: var(--viking-font-weight-bold, 700);
-  letter-spacing: var(--viking-letter-spacing-tighter, -0.03em);
-}
-
-h2 {
-  font-size: var(--viking-font-size-xl, 24px);
-}
-
-h3 {
-  font-size: var(--viking-font-size-lg, 20px);
-}
-
-h4 {
-  font-size: var(--viking-font-size-md, 18px);
-}
-
-h5,
-h6 {
-  font-size: var(--viking-font-size, 16px);
-  font-weight: var(--viking-font-weight-medium, 500);
-}
-
-p {
-  line-height: var(--viking-line-height-relaxed, 1.625);
-}
-
-code,
-pre,
-kbd,
-samp,
-.viking-font-mono {
-  font-family: var(--viking-font-family-mono);
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-}
-
-.viking-font-display {
-  font-family: var(--viking-font-family);
-  font-weight: var(--viking-font-weight-bold, 700);
-  letter-spacing: var(--viking-letter-spacing-caps, 0.08em);
-  text-transform: uppercase;
-}
-
-.viking-tabular-nums {
-  font-variant-numeric: tabular-nums lining-nums;
-}

package/src/styles/_variables.scss

@@ -1,527 +0,0 @@
-// ============================================================================
-// Viking-UI Premium Foundation Tokens
-// ----------------------------------------------------------------------------
-// Dark-first precision aesthetic: deep navy/black surfaces, #2176ff primary,
-// refined secondary accents. 8px spacing scale with 4px micro-grid aliases.
-// All --viking-* semantic tokens in viking-ui.scss map from these values.
-// ============================================================================
-
-: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);
-  }
-}