/* =====================================================================
   Musikraum ↔ DesignSystem Bridge
   ---------------------------------------------------------------------
   Loaded after klang.css. The original high-quality site remains the source
   of visual truth, while its legacy variables are now aliases of the shared
   DesignSystem semantic tokens. This makes future extraction into reusable
   components/patterns possible without flattening the design.
   ===================================================================== */

:root {
  /* Legacy Musikraum aliases backed by DesignSystem tokens. */
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --paper: var(--ds-color-paper-300);
  --paper-soft: var(--color-bg-secondary);
  --surface: var(--color-surface);
  --forest: var(--ds-color-wood-650);
  --forest-dark: var(--ds-color-wood-900);
  --moss: var(--ds-color-moss-500);
  --clay: var(--color-text-tertiary);
  --gold: var(--color-accent);
  --accent: var(--color-interactive);
  --accent-dark: var(--color-interactive-dark);
  --cream: var(--color-surface-subtle);
  --border: var(--color-border);
  --radius: var(--ds-radius-md);
  --header-h: var(--ds-header-h);
  --reading-measure: var(--ds-reading-measure);
  --section-py: var(--ds-section-py);
  --s-1: var(--ds-space-1);
  --s-2: var(--ds-space-2);
  --s-3: var(--ds-space-3);
  --s-4: var(--ds-space-4);
  --s-5: var(--ds-space-5);
  --s-6: var(--ds-space-6);
  --s-7: var(--ds-space-7);
  --s-8: var(--ds-space-8);
  --s-9: var(--ds-space-9);
  --s-10: var(--ds-space-10);
  --golden: var(--ds-golden);
  --shadow: var(--ds-shadow-card);
  --shadow-strong: var(--ds-shadow-strong);
}

/* Contract annotations: these selectors keep their existing styling in
   klang.css, but are now formally treated as website patterns/components.
   The low specificity prevents the bridge from fighting the original page. */
:where(.site-header) { --ds-pattern: site-header; }
:where(.hero, .subhero) { --ds-pattern: hero; }
:where(.section-head) { --ds-pattern: section-head; }
:where(.card, .welcome-card, .offering-card, .faq__item, .aside) { --ds-component: card; }
:where(.btn) { --ds-component: button; }
:where(.grid, .grid-12, .grid--3) { --ds-pattern: responsive-grid; }
:where(.cta, .sound-band, .stage-cta) { --ds-pattern: cta-band; }
:where(.site-footer) { --ds-pattern: site-footer; }

/* Safe progressive enhancement for browsers that support dynamic viewport. */
@supports (min-height: 100svh) {
  :root { --ds-viewport-min: 100svh; }
}