/* Spotify — FoxUI brend mavzusi (tokens/themes-brand/spotify.tokens.json). Ulaniş: <link rel="stylesheet" href="…/themes/spotify.css"> + data-fx-theme="spotify" */
@layer fx.tokens {
[data-fx-theme="spotify"], [data-fx-theme="spotify"][data-fx-scheme="light"], [data-fx-theme="spotify"] [data-fx-scheme="light"]:not([data-fx-theme]) {
  --fx-color-neutral-25: #F9FCF9;
  --fx-color-neutral-50: #F5F8F5;
  --fx-color-neutral-100: #EEF1EE;
  --fx-color-neutral-200: #E2E5E3;
  --fx-color-neutral-300: #CFD6D0;
  --fx-color-neutral-400: #9FA59F;
  --fx-color-neutral-500: #686E68;
  --fx-color-neutral-600: #505651;
  --fx-color-neutral-700: #3D433E;
  --fx-color-neutral-800: #242925;
  --fx-color-neutral-900: #161B17;
  --fx-color-neutral-950: #0E130F;
  --fx-color-brand-50: #E0FFE4;
  --fx-color-brand-100: #CBF7D1;
  --fx-color-brand-200: #ADE7B6;
  --fx-color-brand-300: #87D394;
  --fx-color-brand-400: #58BC6E;
  --fx-color-brand-500: #1DB954;
  --fx-color-brand-600: #008C3A;
  --fx-color-brand-700: #027530;
  --fx-color-brand-800: #005E25;
  --fx-color-brand-900: #01481B;
  --fx-color-brand-950: #052F12;
  --fx-color-pastel-yellow: #EEDC84;
  --fx-color-pastel-pink: #FDBBD9;
  --fx-color-pastel-blue: #B3D4FE;
  --fx-color-pastel-coral: #FEC0AD;
  --fx-color-pastel-green: #AAE1B3;
  --fx-color-pastel-purple: #D9C6FF;
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-500);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-400);
  --fx-bg-brand-solid-active: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-600);
  --fx-viz-brand: var(--fx-color-brand-700);
  --fx-text-primary: var(--fx-color-neutral-900);
  --fx-text-secondary: var(--fx-color-neutral-600);
  --fx-text-tertiary: var(--fx-color-neutral-500);
  --fx-text-disabled: var(--fx-color-neutral-400);
  --fx-text-on-category: var(--fx-color-neutral-900);
  --fx-text-on-rail: var(--fx-color-neutral-300);
  --fx-text-on-rail-strong: var(--fx-color-neutral-25);
  --fx-text-on-rail-current: color-mix(in oklab, var(--fx-bg-rail-selected) 82%, var(--fx-text-on-rail-strong));
  --fx-text-on-static-light: var(--fx-color-neutral-900);
  --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25));
  --fx-bg-surface: var(--fx-color-white);
  --fx-bg-subtle: var(--fx-color-neutral-50);
  --fx-bg-muted: var(--fx-color-neutral-100);
  --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%);
  --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%);
  --fx-bg-error-subtle: var(--fx-color-red-50);
  --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error));
  --fx-bg-success-subtle: var(--fx-color-green-50);
  --fx-bg-warning-subtle: var(--fx-color-amber-50);
  --fx-bg-overlay: var(--fx-color-neutral-950);
  --fx-bg-category-yellow: var(--fx-color-pastel-yellow);
  --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page));
  --fx-bg-category-pink: var(--fx-color-pastel-pink);
  --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page));
  --fx-bg-category-blue: var(--fx-color-pastel-blue);
  --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page));
  --fx-bg-category-coral: var(--fx-color-pastel-coral);
  --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page));
  --fx-bg-category-green: var(--fx-color-pastel-green);
  --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page));
  --fx-bg-category-purple: var(--fx-color-pastel-purple);
  --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page));
  --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand));
  --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand));
  --fx-bg-info-subtle: var(--fx-color-blue-50);
  --fx-bg-static-light: var(--fx-color-neutral-25);
  --fx-bg-surface-container-lowest: light-dark(var(--fx-bg-surface), var(--fx-bg-page));
  --fx-bg-surface-container-low: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 2%);
  --fx-bg-surface-container: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 4%);
  --fx-bg-surface-container-high: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 7%);
  --fx-bg-surface-container-highest: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 10%);
  --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface));
  --fx-selection-text: var(--fx-text-primary);
  --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent);
  --fx-scrollbar-thumb-hover: color-mix(in oklab, var(--fx-text-primary) 45%, transparent);
  --fx-border-color-default: var(--fx-color-neutral-200);
  --fx-border-color-strong: var(--fx-color-neutral-300);
  --fx-shadow-color: var(--fx-color-neutral-900);
  --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface));
  --fx-viz-accent: var(--fx-color-pastel-yellow);
  --fx-viz-context: var(--fx-color-neutral-300);
  --fx-viz-grid: var(--fx-border-color-default);
  --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent);
  --fx-viz-map-water: color-mix(in oklab, var(--fx-color-blue-700) 60%, var(--fx-color-neutral-600));
  --fx-viz-map-space: var(--fx-color-neutral-950);
  --fx-viz-map-route: var(--fx-viz-brand);
  --fx-viz-map-point: var(--fx-viz-accent);
  --fx-viz-map-point-ring: var(--fx-bg-surface);
  --fx-viz-map-label: var(--fx-text-primary);
  --fx-elevation-1: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent);
  --fx-elevation-2: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
  --fx-elevation-3: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent);
  --fx-elevation-4: 0 20px calc(24px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 8px calc(8px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 4%), transparent);
  --fx-elevation-5: 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 18%), transparent), 0 8px calc(16px * var(--fx-knob-blur)) -6px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
  --fx-elevation-tint-0: var(--fx-bg-surface);
  --fx-elevation-tint-1: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 3%));
  --fx-elevation-tint-2: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 5%));
  --fx-elevation-tint-3: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 8%));
  --fx-elevation-tint-4: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 11%));
  --fx-elevation-tint-5: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 14%));
  --fx-priority-4: var(--fx-border-color-strong);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="spotify"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-solid-active: var(--fx-color-brand-200);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
    --fx-text-primary: var(--fx-color-neutral-50);
    --fx-text-secondary: var(--fx-color-neutral-300);
    --fx-text-tertiary: var(--fx-color-neutral-400);
    --fx-text-disabled: var(--fx-color-neutral-600);
    --fx-text-on-category: var(--fx-color-neutral-50);
    --fx-bg-page: var(--fx-color-neutral-950);
    --fx-bg-surface: var(--fx-color-neutral-900);
    --fx-bg-subtle: var(--fx-color-neutral-900);
    --fx-bg-muted: var(--fx-color-neutral-800);
    --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%);
    --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%);
    --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface));
    --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error));
    --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface));
    --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface));
    --fx-bg-overlay: var(--fx-color-black);
    --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page));
    --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page));
    --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page));
    --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page));
    --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page));
    --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page));
    --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand));
    --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand));
    --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface));
    --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-900) 30%, var(--fx-color-neutral-800));
    --fx-bg-surface-container-lowest: light-dark(var(--fx-bg-surface), var(--fx-bg-page));
    --fx-bg-surface-container-low: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 2%);
    --fx-bg-surface-container: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 4%);
    --fx-bg-surface-container-high: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 7%);
    --fx-bg-surface-container-highest: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 10%);
    --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface));
    --fx-selection-text: var(--fx-text-primary);
    --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent);
    --fx-scrollbar-thumb-hover: color-mix(in oklab, var(--fx-text-primary) 45%, transparent);
    --fx-border-color-default: var(--fx-color-neutral-800);
    --fx-border-color-strong: var(--fx-color-neutral-700);
    --fx-shadow-color: var(--fx-color-black);
    --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface));
    --fx-viz-accent: var(--fx-color-pastel-yellow);
    --fx-viz-context: var(--fx-color-neutral-600);
    --fx-viz-grid: var(--fx-border-color-default);
    --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent);
    --fx-viz-map-water: color-mix(in oklab, var(--fx-color-blue-900) 75%, var(--fx-color-neutral-950));
    --fx-viz-map-route: var(--fx-viz-brand);
    --fx-viz-map-point: var(--fx-viz-accent);
    --fx-viz-map-point-ring: var(--fx-bg-surface);
    --fx-viz-map-label: var(--fx-text-primary);
    --fx-elevation-1: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent);
    --fx-elevation-2: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
    --fx-elevation-3: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent);
    --fx-elevation-4: 0 20px calc(24px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 8px calc(8px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 4%), transparent);
    --fx-elevation-5: 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 18%), transparent), 0 8px calc(16px * var(--fx-knob-blur)) -6px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
    --fx-elevation-tint-0: var(--fx-bg-surface);
    --fx-elevation-tint-1: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 3%));
    --fx-elevation-tint-2: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 5%));
    --fx-elevation-tint-3: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 8%));
    --fx-elevation-tint-4: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 11%));
    --fx-elevation-tint-5: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 14%));
    --fx-priority-4: var(--fx-border-color-strong);
  }
}
[data-fx-theme="spotify"][data-fx-scheme="dark"], [data-fx-theme="spotify"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="spotify"]:not([data-fx-scheme="light"]) {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-solid-active: var(--fx-color-brand-200);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
  --fx-text-primary: var(--fx-color-neutral-50);
  --fx-text-secondary: var(--fx-color-neutral-300);
  --fx-text-tertiary: var(--fx-color-neutral-400);
  --fx-text-disabled: var(--fx-color-neutral-600);
  --fx-text-on-category: var(--fx-color-neutral-50);
  --fx-bg-page: var(--fx-color-neutral-950);
  --fx-bg-surface: var(--fx-color-neutral-900);
  --fx-bg-subtle: var(--fx-color-neutral-900);
  --fx-bg-muted: var(--fx-color-neutral-800);
  --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%);
  --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%);
  --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface));
  --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error));
  --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface));
  --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface));
  --fx-bg-overlay: var(--fx-color-black);
  --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page));
  --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page));
  --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page));
  --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page));
  --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page));
  --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page));
  --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand));
  --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand));
  --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface));
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-900) 30%, var(--fx-color-neutral-800));
  --fx-bg-surface-container-lowest: light-dark(var(--fx-bg-surface), var(--fx-bg-page));
  --fx-bg-surface-container-low: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 2%);
  --fx-bg-surface-container: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 4%);
  --fx-bg-surface-container-high: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 7%);
  --fx-bg-surface-container-highest: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 10%);
  --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface));
  --fx-selection-text: var(--fx-text-primary);
  --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent);
  --fx-scrollbar-thumb-hover: color-mix(in oklab, var(--fx-text-primary) 45%, transparent);
  --fx-border-color-default: var(--fx-color-neutral-800);
  --fx-border-color-strong: var(--fx-color-neutral-700);
  --fx-shadow-color: var(--fx-color-black);
  --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface));
  --fx-viz-accent: var(--fx-color-pastel-yellow);
  --fx-viz-context: var(--fx-color-neutral-600);
  --fx-viz-grid: var(--fx-border-color-default);
  --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent);
  --fx-viz-map-water: color-mix(in oklab, var(--fx-color-blue-900) 75%, var(--fx-color-neutral-950));
  --fx-viz-map-route: var(--fx-viz-brand);
  --fx-viz-map-point: var(--fx-viz-accent);
  --fx-viz-map-point-ring: var(--fx-bg-surface);
  --fx-viz-map-label: var(--fx-text-primary);
  --fx-elevation-1: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent);
  --fx-elevation-2: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
  --fx-elevation-3: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent);
  --fx-elevation-4: 0 20px calc(24px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 8px calc(8px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 4%), transparent);
  --fx-elevation-5: 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 18%), transparent), 0 8px calc(16px * var(--fx-knob-blur)) -6px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
  --fx-elevation-tint-0: var(--fx-bg-surface);
  --fx-elevation-tint-1: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 3%));
  --fx-elevation-tint-2: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 5%));
  --fx-elevation-tint-3: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 8%));
  --fx-elevation-tint-4: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 11%));
  --fx-elevation-tint-5: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 14%));
  --fx-priority-4: var(--fx-border-color-strong);
}
}