/* Spacing rhythm: every gap, padding and margin is a multiple of 4. The one documented exception is optical
   compensation inside a control — 1px of block padding on .sl-run-label, .sl-card-titlebtn, .sl-card-tag and
   .sl-switcher — added so descenders clear their clip and small targets reach the 24px floor without changing the
   type scale (critic r3 F12). Nothing else may leave the 4px grid. */
/*
 * SoundLabs design tokens (05-ux-baseline.md §2.8, 06-DESIGN-DECISIONS.md D5).
 * Palette, spacing, radii, elevation, motion, z-index and focus ring are identical to the
 * rebuilt Image Tools (public_html/image-tools/css/tokens.css), re-scoped to body.soundlabs-page.
 * SoundLabs adds only what audio needs: player/waveform colours, tool tints, speaker colours, layout sizes.
 *
 * Rules for every tool author:
 *  - Colours, radii, spacing, type, elevation and motion come from here. No raw hex in tool CSS.
 *  - Radii: 6 / 10 / 14 / 20 + pill. Nothing else.
 *  - No bordered box inside a bordered box: group with spacing and a 1px --border divider.
 *  - Uppercase micro type only for rail group labels and library day headers.
 *  - Dark only (color-scheme: dark). prefers-color-scheme does not change tokens.
 */

html:has(body.soundlabs-page) {
  background: #070E14;
}

body.soundlabs-page {
  /* ---- Palette (image-tools) ---- */
  --bg: #070E14;
  --surface-1: #0C161E;
  --surface-2: #111E28;
  --surface-3: #182834;
  --border: #1F2F3B;
  --border-strong: #2A3D4B;
  --border-control: #587083;
  --text: #EAF2F8;
  --text-2: #B4C4D1;
  --text-3: #8A9DAD;
  --text-disabled: #5B6E7D;
  --accent: #5EEAD4;
  --accent-hover: #2DD4BF;
  --accent-tint: rgba(94, 234, 212, .12);
  --accent-wash: rgba(94, 234, 212, .06);
  --on-accent: #04211D;
  --on-accent-tag: rgba(4, 33, 29, .12);
  --brand-gradient: linear-gradient(135deg, #8DF6C7, #6BC7FF);
  --info: #7DD3FC;
  --success: #86EFAC;
  --warning: #FCD34D;
  --danger: #FCA5A5;
  --danger-line: rgba(252, 165, 165, .35);
  --danger-tint: rgba(252, 165, 165, .10);
  --pro: #C4B5FD;
  --pro-fill: #6D28D9;
  --scrim: rgba(4, 8, 12, .72);
  --cover-scrim: rgba(7, 14, 20, .45);
  --glass: rgba(12, 22, 30, .92);

  /* ---- SoundLabs additions (05 §2.8) ---- */
  --player-bg: #0A141C;
  --wave-played: linear-gradient(90deg, #8DF6C7, #6BC7FF);
  --wave-played-a: #8DF6C7;
  --wave-played-b: #6BC7FF;
  --wave-rest: #587083;
  --wave-rest-dim: #34495A;
  --playhead: var(--text);
  --tool-song: #7CC8FF;
  --tool-inst: #8DF6C7;
  --tool-sfx: #FDBA74;
  --tool-voice: #F9A8D4;
  --tool-song-rgb: 124, 200, 255;
  --tool-inst-rgb: 141, 246, 199;
  --tool-sfx-rgb: 253, 186, 116;
  --tool-voice-rgb: 249, 168, 212;
  --speaker-1: var(--tool-song);
  --speaker-2: var(--tool-voice);
  --speaker-3: var(--tool-sfx);
  --speaker-4: var(--tool-inst);

  /* ---- Type ---- */
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --fs-display: 1.5rem;    --lh-display: 1.875rem;   /* 24/30 */
  --fs-brand: 1.25rem;     --lh-brand: 1.625rem;     /* 20/26 */
  --fs-title: 1.125rem;    --lh-title: 1.625rem;     /* 18/26 */
  --fs-body: .9375rem;     --lh-body: 1.375rem;      /* 15/22 */
  --fs-lyric: .875rem;     --lh-lyric: 1.375rem;     /* 14/22 */
  --fs-label: .8125rem;    --lh-label: 1.125rem;     /* 13/18 */
  --fs-meta: .75rem;       --lh-meta: 1rem;          /* 12/16 */
  --fs-micro: .6875rem;    --lh-micro: .875rem;      /* 11/14 */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px;

  /* ---- Radii: four values plus pill ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --e-0: none;
  --e-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --e-2: 0 8px 24px rgba(0, 0, 0, .45);
  --e-3: 0 24px 64px rgba(0, 0, 0, .6);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
  --t-shimmer: 1.6s;

  /* ---- Layout ---- */
  --sl-nav-h: 112px;          /* measured at runtime by main.js (promo strip + nav) */
  --rail-w: 232px;
  --composer-w: 400px;
  --player-h: 72px;
  --dock-h: 56px;
  --mini-h: 52px;
  --switcher-h: 56px;
  --target: 44px;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---- z-index scale ---- */
  /* The shared nav is sticky at z 50 and its phone menu is fixed at z 49: app bars stay below both. */
  --z-sticky: 40;
  --z-dock: 45;
  --z-popover: 1100;
  --z-toast: 1200;

  color-scheme: dark;
  background: var(--bg);
}

/* App typography lives on the app roots, not <body>, so the shared nav, footer and upgrade modal
   keep the site's own type. .sl-layer = dialogs, sheets, menus, toasts. */
body.soundlabs-page .sl-app,
body.soundlabs-page .sl-layer,
body.soundlabs-page .sl-seo {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}

@media (max-width: 767px) {
  body.soundlabs-page {
    --fs-display: 1.375rem;
    --lh-display: 1.75rem; /* 22/28 */
  }
}

/* ---- Base ---- */
body.soundlabs-page .sl-app,
body.soundlabs-page .sl-app *,
body.soundlabs-page .sl-app *::before,
body.soundlabs-page .sl-app *::after,
body.soundlabs-page .sl-layer,
body.soundlabs-page .sl-layer *,
body.soundlabs-page .sl-seo,
body.soundlabs-page .sl-seo * {
  box-sizing: border-box;
}

body.soundlabs-page [hidden] { display: none !important; }

body.soundlabs-page .sl-app :focus,
body.soundlabs-page .sl-layer :focus { outline: none; }
body.soundlabs-page .sl-app :focus-visible,
body.soundlabs-page .sl-layer :focus-visible,
body.soundlabs-page .sl-seo :focus-visible,
body.soundlabs-page .sl-skip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body.soundlabs-page .sl-app ::selection,
body.soundlabs-page .sl-layer ::selection { background: rgba(94, 234, 212, .3); color: var(--text); }

.sl-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Stronger than component `font:` shorthands (which reset font-variant). */
.sl-num,
body.soundlabs-page .sl-app .sl-num,
body.soundlabs-page .sl-layer .sl-num,
body.soundlabs-page .sl-seo .sl-num { font-variant-numeric: tabular-nums; }

/* Reduced motion: no shimmer, pulse, equaliser or smooth scroll. Reveals become a 120ms cross-fade. */
@media (prefers-reduced-motion: reduce) {
  body.soundlabs-page {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 120ms;
  }
  html:has(body.soundlabs-page) { scroll-behavior: auto; }
  body.soundlabs-page .sl-app *,
  body.soundlabs-page .sl-app *::before,
  body.soundlabs-page .sl-app *::after,
  body.soundlabs-page .sl-layer *,
  body.soundlabs-page .sl-layer *::before,
  body.soundlabs-page .sl-layer *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}