@layer base {
:root {
  /* Layer 1: upstream design-system primitives (Tailwind/Yew compatible). */
  --ds-color-black: #000;
  --ds-color-white: #fff;
  --ds-color-black-rgb: 0 0 0;
  --ds-color-white-rgb: 255 255 255;
  --ds-color-transparent: transparent;

  --ds-font-family-sans: "Iosevka Aile", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-family-icon: "Font Awesome 6 Pro";
  --ds-font-size-xs: 0.75rem;
  --ds-font-size-sm: 0.875rem;
  --ds-font-size-md: 1rem;
  --ds-font-size-lg: 1.25rem;
  --ds-font-size-app-title: clamp(1.5rem, 2.6vw, 2.4rem);
  --ds-font-size-app-title-compact: 1.25rem;
  --ds-font-size-icon-xs: 0.75em;
  --ds-font-size-icon-sm: 0.85em;
  --ds-font-weight-regular: 400;
  --ds-font-weight-bold: 700;
  --ds-font-weight-extrabold: 800;
  --ds-font-weight-black: 900;
  --ds-line-height-none: 1;
  --ds-line-height-tight: 1.25;
  --ds-line-height-4: 1rem;
  --ds-line-height-5: 1.25rem;
  --ds-line-height-7: 1.75rem;

  --ds-space-0: 0;
  --ds-space-px: 1px;
  --ds-space-hairline: 0.5px;
  --ds-space-0-5: 0.125rem;
  --ds-space-1: 0.25rem;
  --ds-space-1-5: 0.375rem;
  --ds-space-2: 0.5rem;
  --ds-space-2-5: 0.625rem;
  --ds-space-3: 0.75rem;
  --ds-space-3-5: 0.875rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-7: 1.75rem;
  --ds-space-8: 2rem;
  --ds-space-9: 2.25rem;
  --ds-space-11: 2.75rem;
  --ds-space-12: 3rem;
  --ds-space-14: 3.5rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;

  --ds-border-width: 1px;
  --ds-border-width-strong: 2px;
  --ds-radius-none: 0;

  --ds-shadow-none: none;
  --ds-duration-fast: 150ms;
  --ds-duration-slow: 2.4s;
  --ds-ease-standard: ease;
  --ds-ease-emphasis: ease-in-out;
  --ds-z-raised: 10;
  --ds-z-overlay: 20;
  --ds-z-toolbar: 40;
  --ds-z-popover: 50;

  /* Layer 2: Wave Digger project aliases. Components must use these. */
  --color-background-rgb: var(--ds-color-black-rgb, 0 0 0);
  --color-text-rgb: var(--ds-color-white-rgb, 255 255 255);
  --color-background: var(--ds-color-black, #000);
  --color-surface: var(--ds-color-black, #000);
  --color-text: var(--ds-color-white, #fff);
  --color-text-inverse: var(--ds-color-black, #000);
  --color-link: var(--color-text, #fff);
  --color-border: rgb(var(--color-text-rgb, 255 255 255) / 0.3);
  --color-border-subtle: rgb(var(--color-text-rgb, 255 255 255) / 0.18);
  --color-border-muted: rgb(var(--color-text-rgb, 255 255 255) / 0.35);
  --color-border-strong: rgb(var(--color-text-rgb, 255 255 255) / 0.75);
  --color-border-focus: var(--color-text, #fff);
  --color-interactive: var(--color-text, #fff);
  --color-interactive-muted: rgb(var(--color-text-rgb, 255 255 255) / 0.7);
  --color-interactive-subtle: rgb(var(--color-text-rgb, 255 255 255) / 0.6);
  --color-interactive-disabled: rgb(var(--color-text-rgb, 255 255 255) / 0.35);
  --color-interactive-active-bg: var(--color-text, #fff);
  --color-interactive-active-text: var(--color-background, #000);
  --color-surface-soft: rgb(var(--color-text-rgb, 255 255 255) / 0.025);
  --color-overlay-surface: rgb(var(--color-background-rgb, 0 0 0) / 0.6);
  --color-range-border: rgb(var(--color-text-rgb, 255 255 255) / 0.4);
  --color-range-track: rgb(var(--color-text-rgb, 255 255 255) / 0.22);
  --color-morph-rail: rgb(var(--color-text-rgb, 255 255 255) / 0.45);
  --color-waveform-highlight-border: rgb(var(--color-text-rgb, 255 255 255) / calc(0.25 + 0.55 * var(--keyframe-highlight)));
  --color-waveform-highlight-shadow: rgb(var(--color-text-rgb, 255 255 255) / calc(0.28 * var(--keyframe-highlight)));
  --color-waveform-highlight-inset: rgb(var(--color-text-rgb, 255 255 255) / calc(0.16 * var(--keyframe-highlight)));
  --color-morph-highlight-border: rgb(var(--color-text-rgb, 255 255 255) / calc(0.45 + 0.55 * var(--keyframe-highlight, 0)));
  --color-morph-highlight-shadow: rgb(var(--color-text-rgb, 255 255 255) / calc(0.34 * var(--keyframe-highlight, 0)));
  --color-active-white-pattern: rgb(var(--color-background-rgb, 0 0 0) / 0.32);
  --color-active-black-pattern: rgb(var(--color-text-rgb, 255 255 255) / 0.75);
  --color-transparent: var(--ds-color-transparent, transparent);

  --font-family-sans: var(--ds-font-family-sans, ui-sans-serif, system-ui, sans-serif);
  --font-family-icon: var(--ds-font-family-icon, "Font Awesome 6 Pro");
  --font-size-xs: var(--ds-font-size-xs, 0.75rem);
  --font-size-sm: var(--ds-font-size-sm, 0.875rem);
  --font-size-md: var(--ds-font-size-md, 1rem);
  --font-size-lg: var(--ds-font-size-lg, 1.25rem);
  --font-size-app-title: var(--ds-font-size-app-title, clamp(1.5rem, 2.6vw, 2.4rem));
  --font-size-app-title-compact: var(--ds-font-size-app-title-compact, 1.25rem);
  --font-size-icon-xs: var(--ds-font-size-icon-xs, 0.75em);
  --font-size-icon-sm: var(--ds-font-size-icon-sm, 0.85em);
  --font-weight-regular: var(--ds-font-weight-regular, 400);
  --font-weight-bold: var(--ds-font-weight-bold, 700);
  --font-weight-extrabold: var(--ds-font-weight-extrabold, 800);
  --font-weight-black: var(--ds-font-weight-black, 900);
  --line-height-none: var(--ds-line-height-none, 1);
  --line-height-tight: var(--ds-line-height-tight, 1.25);
  --line-height-4: var(--ds-line-height-4, 1rem);
  --line-height-5: var(--ds-line-height-5, 1.25rem);
  --line-height-7: var(--ds-line-height-7, 1.75rem);

  --space-0: var(--ds-space-0, 0);
  --space-px: var(--ds-space-px, 1px);
  --space-hairline: var(--ds-space-hairline, 0.5px);
  --space-0-5: var(--ds-space-0-5, 0.125rem);
  --space-1: var(--ds-space-1, 0.25rem);
  --space-1-5: var(--ds-space-1-5, 0.375rem);
  --space-2: var(--ds-space-2, 0.5rem);
  --space-2-5: var(--ds-space-2-5, 0.625rem);
  --space-3: var(--ds-space-3, 0.75rem);
  --space-3-5: var(--ds-space-3-5, 0.875rem);
  --space-4: var(--ds-space-4, 1rem);
  --space-5: var(--ds-space-5, 1.25rem);
  --space-6: var(--ds-space-6, 1.5rem);
  --space-7: var(--ds-space-7, 1.75rem);
  --space-8: var(--ds-space-8, 2rem);
  --space-9: var(--ds-space-9, 2.25rem);
  --space-11: var(--ds-space-11, 2.75rem);
  --space-12: var(--ds-space-12, 3rem);
  --space-14: var(--ds-space-14, 3.5rem);
  --space-20: var(--ds-space-20, 5rem);
  --space-24: var(--ds-space-24, 6rem);
  --opacity-disabled: 0.45;
  --opacity-pulse-min: 0.72;

  --radius-none: var(--ds-radius-none, 0);
  --border-width: var(--ds-border-width, 1px);
  --border-width-strong: var(--ds-border-width-strong, 2px);
  --shadow-none: var(--ds-shadow-none, none);
  --shadow-focus-inset: inset 0 0 0 var(--border-width) var(--color-border-focus);
  --shadow-focus-outline: 0 0 0 var(--border-width) var(--color-border-focus);
  --shadow-error-inset: inset 0 0 0 var(--border-width) var(--color-border-muted);
  --shadow-menu-pulse: 0 0 10px rgb(var(--color-text-rgb) / 0.95), 0 0 22px rgb(var(--color-text-rgb) / 0.45);
  --shadow-menu-pulse-filter-start: drop-shadow(0 0 0 rgb(var(--color-text-rgb) / 0));
  --shadow-menu-pulse-filter-end: drop-shadow(0 0 10px rgb(var(--color-text-rgb) / 0.75));
  --shadow-waveform-highlight: 0 0 calc(30px * var(--keyframe-highlight)) var(--color-waveform-highlight-shadow), inset 0 0 calc(16px * var(--keyframe-highlight)) var(--color-waveform-highlight-inset);
  --shadow-morph-highlight: 0 0 calc(24px * var(--keyframe-highlight, 0)) var(--color-morph-highlight-shadow);
  --shadow-popover: 0 16px 48px rgb(var(--color-background-rgb) / 0.65);
  --z-raised: var(--ds-z-raised, 10);
  --z-overlay: var(--ds-z-overlay, 20);
  --z-toolbar: var(--ds-z-toolbar, 40);
  --z-popover: var(--ds-z-popover, 50);
  --duration-fast: var(--ds-duration-fast, 150ms);
  --duration-slow: var(--ds-duration-slow, 2.4s);
  --ease-standard: var(--ds-ease-standard, ease);
  --ease-emphasis: var(--ds-ease-emphasis, ease-in-out);

  --size-min-viewport-width: 320px;
  --size-control-touch-height: 1.5rem;
  --size-range-track-height: 0.25rem;
  --size-range-thumb: 0.9rem;
  --size-range-thumb-half: 0.45rem;
  --size-app-title-spacing: 0.34em;
  --size-app-title-spacing-compact: 0.22em;
  --size-icon-chevron-right-offset: 0.75rem;
  --size-sample-loading-min-left: 260px;
  --size-sample-loading-min-right: 320px;
  --size-sample-info-min: 70px;
  --size-mode-button-min-height: 2.15rem;
  --size-black-key-width: clamp(24px, 8%, 38px);
  --size-black-key-width-compact: clamp(16px, 9%, 24px);
  --size-piano-standard-height: 7rem;
  --size-piano-compact-height: 4rem;
  --size-piano-white-label-offset: 76px;
  --size-piano-black-height: 68px;
  --size-piano-black-height-compact: 40px;
  --size-octave-min-width: 34px;
  --size-octave-min-width-compact: 28px;
  --size-octave-min-height-compact: 1.9rem;
  --size-waveform-glow: 30px;
  --size-waveform-inset-glow: 16px;
  --size-morph-marker: 3rem;
  --size-morph-glow: 24px;
  --size-editable-number-min-height: 1.75rem;
}
}