/* ─────────────────────────────────────────────────────────────────────────
   marketing-base.css — design tokens + base reset for the marketing/tool
   pages (loudness-meter, bpm-key-finder, stereo-phase-checker, dr-meter, etc.).

   These pages only need main.css for its :root tokens and base element reset;
   all their layout lives in marketing.css (.mkt-*) and inline <style> (tool UI).
   Loading this ~2 KB file instead of the 244 KB app stylesheet removes the
   large render-blocking, mostly-unused CSS payload on the critical path.

   Token blocks are kept verbatim in sync with css/main.css. If a token changes
   there, mirror it here.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Dark mode — default */
  --bg:           #0B1218;
  --surface:      #161E26;
  --surface-2:    #1D2530;
  --border:       #24303D;
  --accent:       #4A90E2;
  --accent-hover: #3a7dd8;
  --accent-ref:   #2dd4bf;
  --accent-strong:       #2f6fb0;
  --accent-strong-hover: #295f9b;
  --text:         #F2F5F7;
  --text-muted:   #8a96a8;
  --success:      #22c55e;
  --warning:      #FFCD00;
  --danger:       #ef4444;
  --amber:        #FFCD00;
  --bg-card:      var(--surface);
  --bg-input:     var(--surface-2);
  --score-high:   #22c55e;
  --score-mid:    #eab308;
  --score-low:    var(--danger);
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 4px 24px rgba(0,0,0,0.5);
  --orange:       #f97316;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:    0.12s;
  --duration-base:    0.15s;
  --duration-medium:  0.2s;
  --duration-reveal:  0.25s;
  --duration-hero:    0.48s;
}

/* ─── Light mode ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #F8FAFC;
  --surface:      #FFFFFF;
  --surface-2:    #F0F4F8;
  --border:       #E2E8F0;
  --accent:       #005B99;
  --accent-hover: #004d85;
  --accent-ref:   #0891b2;
  --accent-strong:       #005B99;
  --accent-strong-hover: #004d85;
  --text:         #1A1C1E;
  --text-muted:   #4b5563;
  --success:      #16a34a;
  --warning:      #ca8a04;
  --danger:       #dc2626;
  --amber:        #d97706;
  --score-high:   #16a34a;
  --score-mid:    #b45309;
  --score-low:    var(--danger);
  --shadow:       0 4px 24px rgba(0,0,0,0.08);
  --orange:       #ea580c;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: var(--text);
  padding: 8px 16px; z-index: 10000;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

html { font-size: 15px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}
button { cursor: pointer; border: none; background: none; }
input  { border: none; outline: none; }
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mono, .score-value, code { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}