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

package/src/styles/_typography.scss

@@ -0,0 +1,87 @@
+// 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

@@ -0,0 +1,527 @@
+// ============================================================================
+// 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);
+  }
+}