/* Design tokens — one place to retune the whole instrument. */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #07080b;
  --bg-2: #0a0c11;
  --panel: #0f1218;
  --panel-2: #141821;
  --panel-3: #1a1f2a;
  --panel-hi: #202634;
  --line: #232a36;
  --line-2: #2e3746;
  --line-soft: #1a1f28;

  /* type */
  --text: #e9edf5;
  --text-2: #c3cad8;
  --muted: #8a94a8;
  --dim: #5d6678;

  /* accents — terminal cyan is the default. The secondary accent follows the
     primary so the playhead, selection and queued states always match the
     chosen theme. */
  --accent: #3ad2ff;
  --accent-hi: #9ceeff;
  --accent-lo: #00a6d6;
  --accent-soft: rgba(58, 210, 255, 0.14);
  --accent-line: rgba(58, 210, 255, 0.4);
  --accent-ink: #06121a;
  --accent-2: var(--accent);
  --accent-2-soft: var(--accent-soft);
  --accent-2-line: var(--accent-line);
  --accent-2-glow: var(--accent-line);
  --accent-3: #b06bff;
  --good: #3ddc97;
  --danger: #ff5470;

  /* geometry */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --gap: 10px;
  --topbar-h: 60px;

  /* elevation */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.55);
  --glow: 0 0 22px rgba(58, 210, 255, 0.35);

  /* type stacks */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --med: 220ms;
}

/* ------------------------------------------------------------- accent themes */

:root[data-accent="amber"] {
  --accent: #ff9d2e;
  --accent-hi: #ffc46b;
  --accent-lo: #ff7a1a;
  --accent-soft: rgba(255, 157, 46, 0.14);
  --accent-line: rgba(255, 157, 46, 0.38);
  --accent-ink: #1a1206;
  --accent-2: #ff9d2e;
  --accent-2-soft: rgba(255, 157, 46, 0.14);
  --accent-2-line: rgba(255, 157, 46, 0.38);
  --accent-2-glow: rgba(255, 157, 46, 0.38);
  --glow: 0 0 22px rgba(255, 157, 46, 0.35);
}

:root[data-accent="magenta"] {
  --accent: #ff4fd8;
  --accent-hi: #ff9cec;
  --accent-lo: #d6009e;
  --accent-soft: rgba(255, 79, 216, 0.14);
  --accent-line: rgba(255, 79, 216, 0.4);
  --accent-ink: #1a0616;
  --accent-2: #ff4fd8;
  --accent-2-soft: rgba(255, 79, 216, 0.14);
  --accent-2-line: rgba(255, 79, 216, 0.4);
  --accent-2-glow: rgba(255, 79, 216, 0.4);
  --glow: 0 0 22px rgba(255, 79, 216, 0.35);
}

:root[data-accent="green"] {
  --accent: #3ddc97;
  --accent-hi: #9cf5c8;
  --accent-lo: #00b36b;
  --accent-soft: rgba(61, 220, 151, 0.14);
  --accent-line: rgba(61, 220, 151, 0.4);
  --accent-ink: #061a10;
  --accent-2: #3ddc97;
  --accent-2-soft: rgba(61, 220, 151, 0.14);
  --accent-2-line: rgba(61, 220, 151, 0.4);
  --accent-2-glow: rgba(61, 220, 151, 0.4);
  --glow: 0 0 22px rgba(61, 220, 151, 0.35);
}

:root[data-accent="red"] {
  --accent: #ff5470;
  --accent-hi: #ff9caf;
  --accent-lo: #d6002a;
  --accent-soft: rgba(255, 84, 112, 0.14);
  --accent-line: rgba(255, 84, 112, 0.4);
  --accent-ink: #1a060a;
  --accent-2: #ff5470;
  --accent-2-soft: rgba(255, 84, 112, 0.14);
  --accent-2-line: rgba(255, 84, 112, 0.4);
  --accent-2-glow: rgba(255, 84, 112, 0.4);
  --glow: 0 0 22px rgba(255, 84, 112, 0.35);
}

:root[data-accent="violet"] {
  --accent: #b06bff;
  --accent-hi: #d6b3ff;
  --accent-lo: #7a2ee6;
  --accent-soft: rgba(176, 107, 255, 0.14);
  --accent-line: rgba(176, 107, 255, 0.4);
  --accent-ink: #12061a;
  --accent-2: #b06bff;
  --accent-2-soft: rgba(176, 107, 255, 0.14);
  --accent-2-line: rgba(176, 107, 255, 0.4);
  --accent-2-glow: rgba(176, 107, 255, 0.4);
  --glow: 0 0 22px rgba(176, 107, 255, 0.35);
}

:root[data-accent="white"] {
  --accent: #e9edf5;
  --accent-hi: #ffffff;
  --accent-lo: #aab4c6;
  --accent-soft: rgba(233, 237, 245, 0.12);
  --accent-line: rgba(233, 237, 245, 0.35);
  --accent-ink: #0a0d12;
  --accent-2: #e9edf5;
  --accent-2-soft: rgba(233, 237, 245, 0.12);
  --accent-2-line: rgba(233, 237, 245, 0.35);
  --accent-2-glow: rgba(233, 237, 245, 0.35);
  --glow: 0 0 22px rgba(233, 237, 245, 0.25);
}