/* =====================================================================
   Musikraum DesignSystem Foundation
   ---------------------------------------------------------------------
   This file introduces the shared DesignSystem token layer underneath the
   existing Musikraum site. It does not replace the original visual design;
   it names the same visual decisions as reusable system tokens.
   ===================================================================== */

@layer ds.reset, ds.tokens, ds.semantic, ds.base, ds.components, ds.patterns;

@layer ds.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg { display: block; max-width: 100%; }
}

@layer ds.tokens {
  :root {
    color-scheme: light;

    /* Primitive palette: Musikraum warm wood/paper world. */
    --ds-color-wood-950: #2f2b25;
    --ds-color-wood-900: #403b34;
    --ds-color-wood-800: #4b6261;
    --ds-color-wood-700: #587271;
    --ds-color-wood-650: #70675a;
    --ds-color-wood-600: #6c645b;
    --ds-color-wood-500: #8a7560;
    --ds-color-wood-300: #d3b47e;
    --ds-color-paper-100: #fff3dd;
    --ds-color-paper-150: #f8e6c4;
    --ds-color-paper-200: #f6e4c2;
    --ds-color-paper-300: #f1d9ad;
    --ds-color-paper-400: #e6c48d;
    --ds-color-gold-500: #b89a63;
    --ds-color-moss-500: #9d998b;

    /* Type scale. */
    --ds-font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --ds-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ds-font-xs: .78rem;
    --ds-font-sm: .92rem;
    --ds-font-base: 1rem;
    --ds-font-lg: 1.15rem;
    --ds-font-xl: 1.28rem;
    --ds-font-h1: clamp(4.1rem, 9vw, 5.6rem);
    --ds-font-h2: clamp(2.25rem, 5vw, 2.85rem);
    --ds-font-h3: 1.5rem;

    /* Layout and rhythm. */
    --ds-container: 1120px;
    --ds-radius-sm: 8px;
    --ds-radius-md: 8px;
    --ds-radius-lg: 8px;
    --ds-header-h: 68px;
    --ds-reading-measure: 64ch;
    --ds-section-py: clamp(64px, 8vw, 118px);
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;
    --ds-space-8: 64px;
    --ds-space-9: 96px;
    --ds-space-10: 128px;
    --ds-golden: 1.618;

    /* Elevation. */
    --ds-shadow-card: 0 2px 6px rgba(74,65,56,.05), 0 14px 36px rgba(74,65,56,.11);
    --ds-shadow-strong: 0 4px 12px rgba(42,35,28,.09), 0 28px 64px rgba(42,35,28,.22);
  }
}

@layer ds.semantic {
  :root {
    --color-bg-primary: var(--ds-color-paper-200);
    --color-bg-secondary: var(--ds-color-paper-400);
    --color-surface: var(--ds-color-paper-100);
    --color-surface-subtle: var(--ds-color-paper-150);
    --color-text-primary: var(--ds-color-wood-950);
    --color-text-secondary: var(--ds-color-wood-600);
    --color-text-tertiary: var(--ds-color-wood-500);
    --color-border: var(--ds-color-wood-300);
    --color-interactive: var(--ds-color-wood-700);
    --color-interactive-dark: var(--ds-color-wood-800);
    --color-accent: var(--ds-color-gold-500);

    --font-display: var(--ds-font-display);
    --font-body: var(--ds-font-body);
    --container-max: var(--ds-container);
    --radius-md: var(--ds-radius-md);
    --section-py-token: var(--ds-section-py);

    --btn-bg: var(--color-interactive);
    --btn-fg: #ffffff;
    --btn-radius: var(--radius-md);
    --card-bg: var(--color-surface);
    --card-border: 1px solid var(--color-border);
    --card-shadow: var(--ds-shadow-card);
  }
}

@layer ds.base {
  :root[data-density="comfortable"] {
    --density-control-py: 12px;
    --density-control-px: 20px;
  }

  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-interactive) 42%, transparent);
    outline-offset: 3px;
  }
}