/* Mycelium Design Tokens — canonical visual contract.
   Legacy CSS is isolated in @layer legacy. Active components consume these semantic tokens. */
:root{
  color-scheme:dark;

  /* Color */
  --color-bg-app:#090a0c;
  --color-bg-deep:#060709;
  --color-surface-sidebar:#0e1013;
  --color-surface-1:#13161a;
  --color-surface-2:#181c21;
  --color-surface-3:#20252b;
  --color-surface-4:#272d34;
  --color-state-hover:rgba(255,255,255,.065);
  --color-state-selected:rgba(229,160,13,.12);
  --color-overlay:rgba(7,8,10,.92);
  --color-scrim:rgba(0,0,0,.72);
  --color-text-primary:#f4f5f6;
  --color-text-secondary:#b0b6bf;
  --color-text-muted:#747d88;
  --color-text-disabled:#535b65;
  --color-accent:#e5a00d;
  --color-accent-hover:#f2b321;
  --color-accent-pressed:#cc8d08;
  --color-accent-soft:rgba(229,160,13,.13);
  --color-focus:#ffd46a;
  --color-success:#6fd39b;
  --color-warning:#e7b85d;
  --color-error:#ff7979;
  --color-offline:#8b95a1;
  --color-divider:rgba(255,255,255,.075);
  --color-divider-strong:rgba(255,255,255,.14);
  --color-selection:rgba(229,160,13,.34);
  --color-on-light:#111;
  --color-on-accent:#18130a;
  --color-on-accent-hover:#151008;
  --color-error-text:#ff9b9b;
  --color-error-soft:rgba(255,121,121,.075);
  --color-error-faint:rgba(255,121,121,.045);
  --color-input-placeholder:#626b76;
  --color-brand-mark-text:#13100b;
  --color-player-sheet:#090b0e;
  --color-player-mobile:rgba(24,27,31,.985);
  --color-mobile-nav:rgba(13,15,18,.985);


  /* Component semantic color/elevation tokens */
  --color-scrollbar-thumb:#32373e;
  --color-nav-section:#5f6874;
  --color-nav-text:#969ea8;
  --color-nav-active:rgba(255,255,255,.07);
  --color-topbar:rgba(9,10,12,.94);
  --color-toolbar:rgba(9,10,12,.965);
  --color-success-ring:rgba(111,211,155,.07);
  --color-error-ring:rgba(255,121,121,.07);
  --color-artwork-placeholder:#5e646c;
  --color-play-on-accent:#161108;
  --color-credit-chip:rgba(255,255,255,.04);
  --color-search-art-overlay:rgba(0,0,0,.44);
  --color-explanation:#606a75;
  --color-dna-accent:rgba(229,160,13,.08);
  --color-appearance-sample-a:#2a2e34;
  --color-appearance-sample-b:#171a1e;
  --color-player-dock:rgba(15,17,20,.985);
  --color-player-play:#0d0f11;
  --color-waveform-idle:#32373d;
  --color-player-on-accent:#15110a;
  --color-player-backdrop:rgba(0,0,0,.75);
  --color-player-card:#0b0d10;
  --color-player-control:rgba(255,255,255,.045);
  --color-player-main:#0a0c0e;
  --color-output-backdrop:rgba(0,0,0,.14);
  --color-more-backdrop:rgba(0,0,0,.58);
  --color-selection-tray:rgba(24,27,31,.98);
  --color-selection-outline:rgba(229,160,13,.42);
  --color-onboarding-backdrop:rgba(0,0,0,.76);
  --color-hero-surface:rgba(24,28,33,.58);
  --color-hero-accent:rgba(229,160,13,.035);

  --elevation-artwork:0 1px 8px rgba(0,0,0,.20);
  --elevation-play:0 8px 24px rgba(0,0,0,.42);
  --elevation-artwork-hover:0 9px 26px rgba(0,0,0,.34);
  --elevation-hero-artwork:0 16px 44px rgba(0,0,0,.42);
  --elevation-player-dock:0 -10px 32px rgba(0,0,0,.20);
  --elevation-player-card:0 30px 90px rgba(0,0,0,.62);
  --elevation-player-artwork:0 18px 54px rgba(0,0,0,.48);
  --elevation-player-main:0 12px 34px rgba(0,0,0,.28);
  --elevation-output:0 18px 48px rgba(0,0,0,.48);

  /* Typography */
  --font-family-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --font-size-display:clamp(34px,4vw,58px);
  --font-size-page-title:clamp(28px,3vw,42px);
  --font-size-page-heading:clamp(24px,2vw,32px);
  --font-size-detail-title:clamp(28px,4vw,52px);
  --font-size-dna-title:clamp(24px,3vw,38px);
  --font-size-player-title:clamp(22px,3vw,32px);
  --font-size-player-title-mobile:clamp(22px,6vw,29px);
  --font-size-display-small:34px;
  --font-size-page-compact:30px;
  --font-size-artwork-icon:26px;
  --font-size-title:24px;
  --font-size-title-small:22px;
  --font-size-section-title:18px;
  --font-size-subheading:16px;
  --font-size-control-emphasis:15px;
  --font-size-body:14px;
  --font-size-card-title:13px;
  --font-size-album-card-title:12px;
  --font-size-track-title:12px;
  --font-size-secondary:12px;
  --font-size-label:11px;
  --font-size-metadata:10px;
  --font-size-caption:9px;
  --font-size-micro:8px;
  --font-size-button:12px;
  --font-weight-regular:450;
  --font-weight-medium:600;
  --font-weight-strong:700;
  --font-weight-heavy:800;
  --line-height-tight:1.12;
  --line-height-snug:1.2;
  --line-height-compact:1.3;
  --line-height-body:1.42;
  --line-height-relaxed:1.5;
  --line-height-spacious:1.6;
  --letter-spacing-eyebrow:.15em;

  /* Spatial rhythm — 4 px baseline. These are the only authored spacing steps. */
  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;

  /* Backward-compatible aliases for components migrated before 3.8.8. */
  --space-1:var(--space-2xs);
  --space-2:var(--space-xs);
  --space-3:var(--space-sm);
  --space-4:var(--space-md);
  --space-5:var(--space-lg);
  --space-6:var(--space-lg);
  --space-7:var(--space-xl);
  --space-8:var(--space-xl);
  --space-9:var(--space-2xl);
  --space-10:var(--space-2xl);

  /* Semantic spacing contracts. */
  --spacing-text:var(--space-2xs);
  --spacing-control:var(--space-xs);
  --spacing-action:var(--space-sm);
  --spacing-heading:var(--space-md);
  --spacing-panel:var(--space-md);
  --spacing-panel-wide:var(--space-lg);
  --spacing-section:var(--space-xl);
  --spacing-grid-x:var(--space-md);
  --spacing-grid-y:var(--space-lg);
  --spacing-dialog:var(--space-lg);
  --spacing-dialog-compact:var(--space-md);

  /* Mycelium Pro unified semantic layout: one contract for every view. */
  --ui-page-gutter:clamp(var(--space-md),2.5vw,var(--space-xl));
  --ui-page-max:1440px;
  --ui-sidebar-width:216px;
  --ui-panel-padding:var(--space-lg);
  --ui-card-padding:var(--space-sm);
  --ui-column-gap:var(--space-md);
  --ui-section-gap:var(--space-xl);
  --ui-control-min-height:40px;
  --ui-player-reserve:124px;
  --ui-input-radius:var(--radius-medium);
  --ui-foreground:var(--color-text-primary);
  --ui-subtle:var(--color-text-secondary);
  --ui-surface:var(--color-surface-1);
  --ui-surface-raised:var(--color-surface-2);
  --ui-line:var(--color-divider-strong);
  --ui-focus-ring:var(--color-focus);

  /* Radius */
  --radius-small:4px;
  --radius-medium:7px;
  --radius-large:11px;
  --radius-xlarge:16px;
  --radius-pill:999px;
  --radius-circle:50%;
  --radius-artwork:7px;

  /* Elevation */
  --elevation-base:none;
  --shadow-20:rgba(0,0,0,.20);
  --shadow-28:rgba(0,0,0,.28);
  --shadow-34:rgba(0,0,0,.34);
  --shadow-42:rgba(0,0,0,.42);
  --shadow-48:rgba(0,0,0,.48);
  --shadow-62:rgba(0,0,0,.62);
  --elevation-card-hover:0 8px 24px rgba(0,0,0,.20);
  --elevation-popover:0 6px 22px rgba(0,0,0,.22);
  --elevation-modal:0 16px 44px rgba(0,0,0,.34);
  --elevation-player:0 10px 30px rgba(0,0,0,.38);
  --shadow-player-mobile:0 10px 30px rgba(0,0,0,.38);
  --color-player-backdrop-idle:#0d0e10;
  --color-player-backdrop-active:#111315;
  --color-player-backdrop-overlay-top:rgba(7,8,9,.12);
  --color-player-backdrop-overlay-bottom:rgba(7,8,9,.78);

  /* Motion */
  --motion-fast:100ms;
  --motion-standard:160ms;
  --motion-slow:240ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);

  /* Control geometry */
  --control-height-small:28px;
  --control-height-medium:36px;
  --control-height-large:44px;
  --control-height-library:40px;
  --touch-target-min:44px;
  --play-overlay-size:36px;
  --play-overlay-size-compact:24px;
  --play-overlay-inset:8px;
  --play-inline-size:30px;

  /* Layout */
  --layout-sidebar-width:216px;
  --layout-sidebar-collapsed:64px;
  --layout-topbar-height:56px;
  --layout-player-height:84px;
  --layout-mobile-nav-height:62px;
  --layout-mobile-player-height:60px;
  --layout-player-sheet-control-max:480px;
  --layout-player-sheet-control-max-mobile:430px;
  --player-seek-track-height:3px;
  --player-seek-thumb-size:12px;
  --layout-page-max:1920px;
  --layout-page-gutter:clamp(20px,2.1vw,40px);
  --layout-reading-max:820px;
  --layout-input-max:1180px;
  --layout-panel-pad:20px;
  --layout-panel-pad-compact:16px;
  --layout-panel-pad-mobile:14px;
  --layout-section-gap:40px;
  --layout-page-head-gap:32px;
  --layout-surface-page:transparent;
  --layout-page-padding:var(--layout-page-gutter);
  --layout-page-padding-tablet:24px;
  --layout-page-padding-mobile:16px;
  --layout-grid-gap:var(--spacing-grid-x);
  --layout-grid-row-gap:var(--spacing-grid-y);
  --layout-card-min:148px;
  --layout-card-max:222px;
  --content-max-readable:1180px;
  --layout-library-popover-width:240px;
  --layout-library-view-popover-width:260px;

  /* Breakpoint contract (documentation mirrors these names; media queries use literal values). */
  --bp-mobile-small:360px;
  --bp-mobile:420px;
  --bp-tablet:820px;
  --bp-desktop:1024px;
  --bp-wide:1600px;
  --bp-ultrawide:2000px;
}