/* Single :root for the app (imported by src/index.css) and for static pages. */
:root {
  --ground: #f7fbff;
  --bg: var(--ground);
  --surface: rgba(255, 255, 255, 0.88);
  --surface-2: #f3f1fd;
  --line: rgba(27, 34, 64, 0.1);
  --ink: #1b2240;
  --text: var(--ink);
  --muted: #3c4766;
  --faint: #4a5470;
  --accent: #6a4ae0;
  --accent-hover: #5a36d4;
  --accent-ink: #ffffff;
  --accent-deep: #3d2496;
  --accent-soft: #efeaff;
  --loop: #3fd6c6;
  --disabled-bg: #f4f4f8;
  --disabled-ink: #8a90a8;
  --danger: #b42318;

  --vocals: #6a4ae0;
  --vocals-fill: #7b5cff;
  --vocals-soft: #efeaff;
  --drums: #0e746c;
  --drums-fill: #3fd6c6;
  --drums-soft: #e3faf7;
  --bass: #1a4a86;
  --bass-fill: #4c8dff;
  --bass-soft: #e7effc;
  --guitar: #c2410c;
  --guitar-fill: #f97316;
  --guitar-soft: #fff0e6;
  --piano: #a16207;
  --piano-fill: #eab308;
  --piano-soft: #fdf5dc;
  --other: #7a3478;
  --other-fill: #e06ec8;
  --other-soft: #fbe9f6;

  --info-ink: #3d2496;
  --info-bg: #efeaff;
  --success-ink: #0e746c;
  --success-bg: #e6f6f3;
  --warn-ink: #8a5300;
  --warn-bg: #fff4dc;
  --error-ink: #b42318;
  --error-bg: #fff0ee;

  --font-display: "Unbounded", "Unbounded Fallback", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-body: system-ui, "PingFang SC", "Noto Sans SC", sans-serif;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-26: 26px;
  --radius-pill: 999px;

  --shadow-panel: inset 0 0 0 1px rgba(27, 34, 64, 0.08), 0 8px 24px rgba(74, 46, 196, 0.08);
  --shadow-primary: 0 6px 18px rgba(106, 74, 224, 0.32), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  --shadow-float: inset 0 0 0 1px rgba(106, 74, 224, 0.18), 0 24px 56px rgba(27, 34, 64, 0.18);

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-56: 56px;

  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-move: 320ms;
  --dur-slow: 460ms;
  --dur-celebrate: 800ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-std: ease-in-out;

  color-scheme: light;
  background-color: var(--ground);
}