baldur 0.1.1

data/app/assets/stylesheets/baldur/application/global.css

@@ -0,0 +1,125 @@
+@layer base {
+  :root {
+    --font-body: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-heading: var(--font-body);
+    --font-ui: var(--font-body);
+    --font-family: var(--font-body);
+    --font-sans: var(--font-body);
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius-xs: 4px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-14: 56px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+    --space-32: 128px;
+    --elev-0: none;
+    --elev-1: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 5%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--color-shadow) 9%, transparent);
+    --elev-2: 0 2px 4px 0 color-mix(in srgb, var(--color-shadow) 6%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+    --elev-3: 0 3px 6px 0 color-mix(in srgb, var(--color-shadow) 7%, transparent), 0 16px 32px -10px color-mix(in srgb, var(--color-shadow) 12%, transparent);
+    --elev-4: 0 4px 8px 0 color-mix(in srgb, var(--color-shadow) 8%, transparent), 0 22px 40px -12px color-mix(in srgb, var(--color-shadow) 14%, transparent);
+    --elev-5: 0 6px 12px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 28px 52px -14px color-mix(in srgb, var(--color-shadow) 16%, transparent);
+    --surface-tonal-0: var(--color-surface);
+    --surface-tonal-1: color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%);
+    --surface-tonal-2: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 8%);
+    --surface-tonal-3: color-mix(in srgb, var(--color-surface) 89%, var(--color-primary) 11%);
+    --surface-tonal-4: color-mix(in srgb, var(--color-surface) 86%, var(--color-primary) 14%);
+    --surface-tonal-5: color-mix(in srgb, var(--color-surface) 82%, var(--color-primary) 18%);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+
+  #hero h1 {
+    letter-spacing: -0.125rem;
+    font-weight: 600;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+
+  h2 {
+    font-size: var(--text-4xl);
+    font-weight: 500;
+    line-height: 3rem;
+  }
+
+  body {
+    font-family: var(--font-body);
+    background-color: var(--color-surface-lowest, var(--color-background));
+    color: var(--color-on-background);
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea {
+    font-family: var(--font-ui);
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+  }
+
+  a {
+    color: var(--color-primary);
+  }
+
+  a:hover {
+    color: color-mix(in srgb, var(--color-primary) 90%, var(--color-on-background));
+  }
+
+  :is(
+    a[href],
+    button:not(:disabled),
+    input[type="button"]:not(:disabled),
+    input[type="submit"]:not(:disabled),
+    input[type="reset"]:not(:disabled),
+    [role="button"]:not([aria-disabled="true"]),
+    [onclick],
+    [data-action*="click->"]
+  ) {
+    cursor: pointer;
+  }
+
+  :is(
+    button:disabled,
+    input[type="button"]:disabled,
+    input[type="submit"]:disabled,
+    input[type="reset"]:disabled,
+    [role="button"][aria-disabled="true"]
+  ) {
+    cursor: not-allowed;
+  }
+
+}

data/app/assets/stylesheets/baldur/application/marketing/layout.css

@@ -0,0 +1,36 @@
+@layer components {
+  .marketing-hero {
+    color: var(--color-on-surface);
+  }
+
+  .marketing-hero a:not(.button) {
+    color: inherit;
+  }
+
+  .marketing-hero .button--outlined {
+    --btn-bg: var(--color-surface);
+    --btn-fg: var(--color-on-surface);
+    --btn-state: var(--color-on-surface);
+    --btn-border: var(--color-outline);
+  }
+
+  .marketing-cta-banner .button--outlined {
+    --btn-fg: var(--color-on-secondary);
+    --btn-state: var(--color-on-secondary);
+    --btn-border: color-mix(in srgb, var(--color-on-secondary) 65%, transparent);
+  }
+
+  .marketing-cta-banner {
+    background-color: #08192b;
+    background-image: linear-gradient(135deg, #08192b 0%, #041220 100%);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  .marketing-cta-banner .button--filled {
+    --btn-bg: var(--color-surface-highest);
+    --btn-fg: var(--color-on-surface);
+    --btn-state: var(--color-on-surface);
+    --btn-border: transparent;
+  }
+}

data/app/assets/stylesheets/baldur/application/motion.css

@@ -0,0 +1,125 @@
+@layer base {
+  :root {
+    /* M3 standard motion tokens — values from material-components/material-web v0_192 */
+    --motion-duration-short1: 50ms;
+    --motion-duration-short2: 100ms;
+    --motion-duration-short3: 150ms;
+    --motion-duration-short4: 200ms;
+    --motion-duration-medium1: 250ms;
+    --motion-duration-medium2: 300ms;
+    --motion-duration-medium3: 350ms;
+    --motion-duration-medium4: 400ms;
+    --motion-duration-long1: 450ms;
+    --motion-duration-long2: 500ms;
+    --motion-duration-long3: 550ms;
+    --motion-duration-long4: 600ms;
+    --motion-duration-extra-long1: 700ms;
+    --motion-duration-extra-long2: 800ms;
+    --motion-duration-extra-long3: 900ms;
+    --motion-duration-extra-long4: 1000ms;
+    --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+    --motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+    --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+    --motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+  }
+
+  :root.theme-transition body,
+  :root.theme-transition body * {
+    transition-property: background-color, color, border-color, fill, stroke;
+    transition-duration: var(--motion-duration-extra-long1);
+    transition-timing-function: var(--motion-easing-standard);
+  }
+
+  @keyframes layer-enter {
+    from {
+      opacity: 0;
+      transform: translateY(20px) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes layer-exit {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(12px) scale(0.98);
+    }
+  }
+
+  @keyframes fade-scale {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+@layer components {
+  .motion-layer-enter {
+    animation: layer-enter var(--motion-duration-medium2) var(--motion-easing-emphasized-decelerate) both;
+  }
+
+  .motion-layer-exit {
+    animation: layer-exit var(--motion-duration-short4) var(--motion-easing-emphasized-accelerate) both;
+  }
+
+  .motion-fade-scale {
+    animation: fade-scale var(--motion-duration-medium1) var(--motion-easing-emphasized-decelerate) both;
+  }
+
+  .motion-slide-up {
+    animation: slide-up var(--motion-duration-medium1) var(--motion-easing-standard-decelerate) both;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-short1: 0ms;
+    --motion-duration-short2: 0ms;
+    --motion-duration-short3: 0ms;
+    --motion-duration-short4: 0ms;
+    --motion-duration-medium1: 0ms;
+    --motion-duration-medium2: 0ms;
+    --motion-duration-medium3: 0ms;
+    --motion-duration-medium4: 0ms;
+    --motion-duration-long1: 0ms;
+    --motion-duration-long2: 0ms;
+    --motion-duration-long3: 0ms;
+    --motion-duration-long4: 0ms;
+    --motion-duration-extra-long1: 0ms;
+    --motion-duration-extra-long2: 0ms;
+    --motion-duration-extra-long3: 0ms;
+    --motion-duration-extra-long4: 0ms;
+  }
+
+  .motion-layer-enter,
+  .motion-layer-exit,
+  .motion-fade-scale,
+  .motion-slide-up {
+    animation: none !important;
+  }
+}

data/app/assets/stylesheets/baldur/application/theme.css

@@ -0,0 +1,329 @@
+:root {
+  /* Brand inputs (edit these for new themes). */
+  --_primary-base: oklch(0.682 0.157 27.1);
+  --_secondary-base: oklch(0.2968 0.0383 195.29);
+  --_accent-base: oklch(0.482 0.067 91.7);
+  --_neutral-base: oklch(0.8672 0 0);
+
+  --_scale-light: oklch(from var(--_neutral-base) 1 c h);
+  --_scale-dark: oklch(from var(--_neutral-base) 0.08 c h);
+
+  --_success-base: oklch(0.56 0.17 142.89);
+  --_warning-base: oklch(0.82 0.15 85);
+  --_info-base: oklch(0.75 0.12 230);
+  --_error-base: oklch(0.72 0.18 25);
+
+  --_tone-50: 10%;
+  --_tone-100: 18%;
+  --_neutral-tone-50: 1.5%;
+  --_tone-200: 28%;
+  --_tone-300: 42%;
+  --_tone-400: 60%;
+  --_tone-600: 82%;
+  --_tone-700: 68%;
+  --_tone-800: 54%;
+  --_tone-900: 40%;
+  --_tone-950: 28%;
+}
+
+@theme {
+  /* Palette scales. */
+  --color-primary-500: var(--_primary-base);
+  --color-primary-50: color-mix(in oklch, var(--color-primary-500) var(--_tone-50), var(--_scale-light));
+  --color-primary-100: color-mix(in oklch, var(--color-primary-500) var(--_tone-100), var(--_scale-light));
+  --color-primary-200: color-mix(in oklch, var(--color-primary-500) var(--_tone-200), var(--_scale-light));
+  --color-primary-300: color-mix(in oklch, var(--color-primary-500) var(--_tone-300), var(--_scale-light));
+  --color-primary-400: color-mix(in oklch, var(--color-primary-500) var(--_tone-400), var(--_scale-light));
+  --color-primary-600: color-mix(in oklch, var(--color-primary-500) var(--_tone-600), var(--_scale-dark));
+  --color-primary-700: color-mix(in oklch, var(--color-primary-500) var(--_tone-700), var(--_scale-dark));
+  --color-primary-800: color-mix(in oklch, var(--color-primary-500) var(--_tone-800), var(--_scale-dark));
+  --color-primary-900: color-mix(in oklch, var(--color-primary-500) var(--_tone-900), var(--_scale-dark));
+  --color-primary-950: color-mix(in oklch, var(--color-primary-500) var(--_tone-950), var(--_scale-dark));
+
+  --color-secondary-500: var(--_secondary-base);
+  --color-secondary-50: color-mix(in oklch, var(--color-secondary-500) var(--_tone-50), var(--_scale-light));
+  --color-secondary-100: color-mix(in oklch, var(--color-secondary-500) var(--_tone-100), var(--_scale-light));
+  --color-secondary-200: color-mix(in oklch, var(--color-secondary-500) var(--_tone-200), var(--_scale-light));
+  --color-secondary-300: color-mix(in oklch, var(--color-secondary-500) var(--_tone-300), var(--_scale-light));
+  --color-secondary-400: color-mix(in oklch, var(--color-secondary-500) var(--_tone-400), var(--_scale-light));
+  --color-secondary-600: color-mix(in oklch, var(--color-secondary-500) var(--_tone-600), var(--_scale-dark));
+  --color-secondary-700: color-mix(in oklch, var(--color-secondary-500) var(--_tone-700), var(--_scale-dark));
+  --color-secondary-800: color-mix(in oklch, var(--color-secondary-500) var(--_tone-800), var(--_scale-dark));
+  --color-secondary-900: color-mix(in oklch, var(--color-secondary-500) var(--_tone-900), var(--_scale-dark));
+  --color-secondary-950: color-mix(in oklch, var(--color-secondary-500) var(--_tone-950), var(--_scale-dark));
+
+  --color-accent-500: var(--_accent-base);
+  --color-accent-50: color-mix(in oklch, var(--color-accent-500) var(--_tone-50), var(--_scale-light));
+  --color-accent-100: color-mix(in oklch, var(--color-accent-500) var(--_tone-100), var(--_scale-light));
+  --color-accent-200: color-mix(in oklch, var(--color-accent-500) var(--_tone-200), var(--_scale-light));
+  --color-accent-300: color-mix(in oklch, var(--color-accent-500) var(--_tone-300), var(--_scale-light));
+  --color-accent-400: color-mix(in oklch, var(--color-accent-500) var(--_tone-400), var(--_scale-light));
+  --color-accent-600: color-mix(in oklch, var(--color-accent-500) var(--_tone-600), var(--_scale-dark));
+  --color-accent-700: color-mix(in oklch, var(--color-accent-500) var(--_tone-700), var(--_scale-dark));
+  --color-accent-800: color-mix(in oklch, var(--color-accent-500) var(--_tone-800), var(--_scale-dark));
+  --color-accent-900: color-mix(in oklch, var(--color-accent-500) var(--_tone-900), var(--_scale-dark));
+  --color-accent-950: color-mix(in oklch, var(--color-accent-500) var(--_tone-950), var(--_scale-dark));
+
+  --color-neutral-500: var(--_neutral-base);
+  --color-neutral-50: color-mix(in oklch, var(--color-neutral-500) var(--_neutral-tone-50), var(--_scale-light));
+  --color-neutral-100: color-mix(in oklch, var(--color-neutral-500) var(--_tone-100), var(--_scale-light));
+  --color-neutral-200: color-mix(in oklch, var(--color-neutral-500) var(--_tone-200), var(--_scale-light));
+  --color-neutral-300: color-mix(in oklch, var(--color-neutral-500) var(--_tone-300), var(--_scale-light));
+  --color-neutral-400: color-mix(in oklch, var(--color-neutral-500) var(--_tone-400), var(--_scale-light));
+  --color-neutral-600: color-mix(in oklch, var(--color-neutral-500) var(--_tone-600), var(--_scale-dark));
+  --color-neutral-700: color-mix(in oklch, var(--color-neutral-500) var(--_tone-700), var(--_scale-dark));
+  --color-neutral-800: color-mix(in oklch, var(--color-neutral-500) var(--_tone-800), var(--_scale-dark));
+  --color-neutral-900: color-mix(in oklch, var(--color-neutral-500) var(--_tone-900), var(--_scale-dark));
+  --color-neutral-950: color-mix(in oklch, var(--color-neutral-500) var(--_tone-950), var(--_scale-dark));
+  --color-neutral: var(--color-neutral-500);
+
+  /* Semantic roles (set in theme files). */
+  --color-primary: initial;
+  --color-secondary: initial;
+  --color-tertiary: initial;
+  --color-accent: initial;
+
+  --color-on-primary: initial;
+  --color-on-secondary: initial;
+  --color-on-tertiary: initial;
+  --color-on-accent: initial;
+
+  --color-primary-container: initial;
+  --color-on-primary-container: initial;
+  --color-secondary-container: initial;
+  --color-on-secondary-container: initial;
+  --color-tertiary-container: initial;
+  --color-on-tertiary-container: initial;
+  --color-accent-container: initial;
+  --color-on-accent-container: initial;
+
+  --color-success: initial;
+  --color-success-container: initial;
+  --color-on-success: initial;
+  --color-on-success-container: initial;
+  --color-success-outline: initial;
+
+  --color-warning: initial;
+  --color-warning-container: initial;
+  --color-on-warning: initial;
+  --color-on-warning-container: initial;
+  --color-warning-outline: initial;
+
+  --color-info: initial;
+  --color-info-container: initial;
+  --color-on-info: initial;
+  --color-on-info-container: initial;
+  --color-info-outline: initial;
+
+  --color-error: initial;
+  --color-on-error: initial;
+  --color-error-container: initial;
+  --color-on-error-container: initial;
+  --color-error-outline: initial;
+
+  --color-background: initial;
+  --color-on-background: initial;
+  --color-surface: initial;
+  --color-on-surface: initial;
+  --color-surface-variant: initial;
+  --color-on-surface-variant: initial;
+
+  --color-surface-lowest: initial;
+  --color-surface-low: initial;
+  --color-surface-medium: initial;
+  --color-surface-high: initial;
+  --color-surface-highest: initial;
+
+  --color-outline: initial;
+  --color-outline-variant: initial;
+  --color-shadow: initial;
+  --color-scrim: initial;
+  --color-inverse-surface: initial;
+  --color-inverse-on-surface: initial;
+  --color-inverse-primary: initial;
+
+  --color-text: initial;
+  --color-text-soft: initial;
+  --color-text-muted: initial;
+  --color-icon: initial;
+
+  --color-border-subtle: initial;
+  --color-border-strong: initial;
+  --color-ring-focus: initial;
+}
+
+@layer components {
+  .surface {
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+  }
+
+  .surface-1 {
+    background-color: var(--color-surface-medium);
+    color: var(--color-on-surface);
+  }
+
+  .surface-2 {
+    background-color: var(--color-surface-high);
+    color: var(--color-on-surface);
+  }
+
+  .outline {
+    border: 1px solid var(--color-outline-variant);
+  }
+
+  .bg-base-100 {
+    background-color: var(--color-surface);
+  }
+
+  .bg-base-100\/70 {
+    background-color: color-mix(in srgb, var(--color-surface) 70%, transparent);
+  }
+
+  .bg-base-100\/90 {
+    background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
+  }
+
+  .bg-base-200 {
+    background-color: var(--color-surface-low);
+  }
+
+  .bg-base-300 {
+    background-color: var(--color-surface-medium);
+  }
+
+  .text-base-content {
+    color: var(--color-on-surface);
+  }
+
+  .text-base-content\/80 {
+    color: color-mix(in srgb, var(--color-on-surface) 80%, transparent);
+  }
+
+  .text-base-content\/70 {
+    color: color-mix(in srgb, var(--color-on-surface) 70%, transparent);
+  }
+
+  .text-base-content\/60 {
+    color: color-mix(in srgb, var(--color-on-surface) 60%, transparent);
+  }
+
+  .border-base-200 {
+    border-color: var(--color-outline-variant);
+  }
+
+  .border-base-300 {
+    border-color: color-mix(in srgb, var(--color-outline-variant) 70%, var(--color-outline));
+  }
+
+  .text-primary {
+    color: var(--color-primary);
+  }
+
+  .bg-primary\/5 {
+    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
+  }
+
+  .bg-primary\/10 {
+    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  }
+
+  .bg-primary\/20 {
+    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+  }
+
+  .from-primary\/10 {
+    --tw-gradient-from: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+  }
+
+  .to-secondary\/10 {
+    --tw-gradient-to: color-mix(in srgb, var(--color-secondary) 10%, transparent);
+  }
+
+  .bg-secondary\/10 {
+    background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
+  }
+
+  .bg-gradient-to-br {
+    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  }
+
+  .via-base-200 {
+    --tw-gradient-stops: var(--tw-gradient-from), color-mix(in srgb, var(--color-surface-low) 100%, transparent), var(--tw-gradient-to, transparent);
+  }
+
+  .ring,
+  .ring-primary {
+    box-shadow: 0 0 0 2px var(--color-primary);
+  }
+
+  .ring-2 {
+    box-shadow: 0 0 0 2px var(--color-outline);
+  }
+
+  .ring-primary\/50 {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 50%, transparent);
+  }
+
+  .focus\:ring-primary\/30:focus {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
+  }
+
+  .focus\:ring-2:focus {
+    box-shadow: 0 0 0 2px var(--color-outline);
+  }
+
+  .focus\:border-primary:focus {
+    border-color: var(--color-primary);
+  }
+
+  .hover\:border-primary\/40:hover {
+    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+
+  .border-primary\/40 {
+    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+
+  .text-primary-content {
+    color: var(--color-on-primary);
+  }
+
+  .placeholder\:text-base-content\/60::placeholder {
+    color: color-mix(in srgb, var(--color-on-surface) 60%, transparent);
+  }
+
+  .divide-base-200> :not([hidden])~ :not([hidden]) {
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .elevation-0 {
+    box-shadow: var(--elev-0);
+  }
+
+  .elevation-1 {
+    box-shadow: var(--elev-1);
+  }
+
+  .elevation-2 {
+    box-shadow: var(--elev-2);
+  }
+
+  .elevation-3 {
+    box-shadow: var(--elev-3);
+  }
+
+  .elevation-4 {
+    box-shadow: var(--elev-4);
+  }
+
+  .elevation-5 {
+    box-shadow: var(--elev-5);
+  }
+}

data/app/assets/stylesheets/baldur/theme/dark.css

@@ -0,0 +1,90 @@
+.dark {
+  /* Pastel-forward dark mode: lighten chroma via neutral-50, not pure white. */
+  --color-neutral-500: color-mix(in oklch, var(--_neutral-base) 8%, var(--_scale-dark));
+
+  --color-primary-500: color-mix(in oklch, var(--_primary-base) 80%, var(--color-neutral-50));
+  --color-secondary-500: color-mix(in oklch, var(--_secondary-base) 45%, var(--color-neutral-50));
+  --color-accent-500: color-mix(in oklch, var(--_accent-base) 55%, var(--color-neutral-50));
+  --color-success: color-mix(in oklch, var(--_success-base) 95%, var(--color-neutral-50));
+  --color-warning: color-mix(in oklch, var(--_warning-base) 90%, var(--color-neutral-50));
+  --color-info: color-mix(in oklch, var(--_info-base) 90%, var(--color-neutral-50));
+  --color-error: color-mix(in oklch, var(--_error-base) 90%, var(--color-neutral-50));
+
+  /* Subtle pastel wash on the canvas. */
+  --_surface-tint: color-mix(in oklch, var(--color-primary-950) 85%, var(--color-accent-950));
+  --color-surface-lowest: color-mix(in oklch, var(--_scale-dark) 98%, var(--_surface-tint));
+
+  /* Elevation ladder: higher surfaces get noticeably lighter. */
+  --color-surface-low: color-mix(in oklch, var(--color-surface-lowest) 92%, var(--color-neutral-400));
+  --color-surface-medium: color-mix(in oklch, var(--color-surface-lowest) 86%, var(--color-neutral-300));
+  --color-surface-high: color-mix(in oklch, var(--color-surface-lowest) 80%, var(--color-neutral-200));
+  --color-surface-highest: color-mix(in oklch, var(--color-surface-lowest) 72%, var(--color-neutral-100));
+
+  --color-background: var(--color-surface-lowest);
+  --color-surface: var(--color-surface-low);
+
+  --color-on-background: var(--color-neutral-100);
+  --color-on-surface: var(--color-neutral-100);
+
+  --color-surface-variant: color-mix(in oklch, var(--color-surface-high) 92%, var(--color-primary-800));
+  --color-on-surface-variant: var(--color-neutral-200);
+
+  --color-primary: var(--color-primary-500);
+  --color-secondary: var(--color-secondary-700);
+  --color-tertiary: var(--color-accent-500);
+  --color-accent: var(--color-accent-500);
+
+  --color-primary-container: color-mix(in oklch, var(--color-surface-high) 86%, var(--color-primary-500));
+  --color-secondary-container: color-mix(in oklch, var(--color-surface-high) 88%, var(--color-secondary-500));
+  --color-tertiary-container: color-mix(in oklch, var(--color-surface-high) 88%, var(--color-accent-500));
+  --color-accent-container: color-mix(in oklch, var(--color-surface-high) 88%, var(--color-accent-500));
+
+  --color-success-container: color-mix(in oklch, var(--color-success) 40%, black 60%);
+  --color-warning-container: color-mix(in oklch, var(--color-warning) 40%, black 60%);
+  --color-info-container: color-mix(in oklch, var(--color-info) 40%, black 60%);
+  --color-error-container: color-mix(in oklch, var(--color-error) 40%, black 60%);
+
+  --color-on-primary: var(--color-neutral-950);
+  --color-on-secondary: var(--color-neutral-950);
+  --color-on-tertiary: var(--color-neutral-950);
+  --color-on-accent: var(--color-neutral-950);
+  --color-on-error: var(--color-neutral-950);
+  --color-on-success: var(--color-neutral-950);
+  --color-on-warning: var(--color-neutral-950);
+  --color-on-info: var(--color-neutral-950);
+
+  --color-on-primary-container: var(--color-neutral-50);
+  --color-on-secondary-container: var(--color-neutral-50);
+  --color-on-tertiary-container: var(--color-neutral-50);
+  --color-on-accent-container: var(--color-neutral-50);
+  --color-on-success-container: oklch(from var(--color-success) 0.8 c h);
+  --color-on-warning-container: oklch(from var(--color-warning) 0.84 c h);
+  --color-on-info-container: oklch(from var(--color-info) 0.82 c h);
+  --color-on-error-container: oklch(from var(--color-error) 0.84 c h);
+
+  --color-text: var(--color-neutral-200);
+  --color-text-soft: color-mix(in oklch, var(--color-neutral-200) 55%, var(--color-neutral-300));
+  --color-text-muted: var(--color-neutral-300);
+  --color-icon: var(--color-neutral-200);
+
+  --color-outline: color-mix(in oklch, var(--color-surface-highest) 97%, var(--color-neutral-50));
+  --color-outline-variant: color-mix(in oklch, var(--color-surface-high) 98%, var(--color-neutral-50));
+  --color-border-subtle: color-mix(in oklch, var(--color-surface-low) 90%, var(--color-neutral-300));
+  --color-border-strong: var(--color-outline);
+  --color-ring-focus: var(--color-primary-300);
+
+  --color-success-outline: oklch(from var(--color-success) calc(l + 0.08) calc(c * 1.2) h);
+  --color-warning-outline: color-mix(in oklch, var(--color-warning) 72%, var(--color-outline-variant));
+  --color-info-outline: color-mix(in oklch, var(--color-info) 72%, var(--color-outline-variant));
+  --color-error-outline: color-mix(in oklch, var(--color-error) 72%, var(--color-outline-variant));
+
+  --color-inverse-surface: var(--color-neutral-50);
+  --color-inverse-on-surface: var(--color-neutral-900);
+  --color-inverse-primary: var(--color-primary-700);
+
+  --color-shadow: oklch(from var(--_neutral-base) 0 c h);
+  --color-scrim: oklch(from var(--_neutral-base) 0 c h);
+
+  --segmented-selected-bg: var(--color-primary-container);
+  --segmented-selected-fg: var(--color-on-primary-container);
+}