/* record:start. generated by tokens-from-record.mjs from the catalog record; change the record, then regenerate */
:root {
  --bg: #0D0B14;
  --surface: #1C1A22;
  --ink: #EDEBF3;
  --muted: #A29FB0;
  --accent: #A879F0;
  --accent-ink: #0D0B14;
  --font-display-stack: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body-stack: "Red Hat Mono", ui-sans-serif, system-ui, sans-serif;
  --radius: 12px; /* record: 12px floating card, 3px bar tops, 999px chips and the primary play button */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F3F8;
    --surface: #FFFFFF;
    --ink: #16141C;
    --muted: #5E5A6C;
    --accent: #6D3FCB;
    --accent-ink: #FFFFFF;
  }
}

:root[data-theme="light"] {
  --bg: #F5F3F8;
  --surface: #FFFFFF;
  --ink: #16141C;
  --muted: #5E5A6C;
  --accent: #6D3FCB;
  --accent-ink: #FFFFFF;
}

:root[data-theme="dark"] {
  --bg: #0D0B14;
  --surface: #1C1A22;
  --ink: #EDEBF3;
  --muted: #A29FB0;
  --accent: #A879F0;
  --accent-ink: #0D0B14;
}
/* record:end */

/* derived tokens: mixed from the record's roles, or measured against them (AGENTS.md lists the ratios) */
:root {
  --font-ui: "Manrope Variable", var(--font-display-stack);
  --font-num: "Red Hat Mono Variable", var(--font-body-stack);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --glass: color-mix(in srgb, var(--surface) 80%, transparent);
  --bar: color-mix(in srgb, var(--ink) 38%, var(--bg));
  --cmp: var(--accent);
  --focus: var(--accent);
  --radius-bar: 3px;
  --radius-pill: 999px;
}

/* bar states: comparing is the accent, the other three are fixed per theme */
:root {
  --swap: #FF8A78;
  --sorted: #5FD3A6;
  --pivot: #F2C14E;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bar: color-mix(in srgb, var(--ink) 55%, var(--bg));
    --swap: #C93A26;
    --sorted: #0B7A55;
    --pivot: #95600A;
  }
}

:root[data-theme="light"] {
  --bar: color-mix(in srgb, var(--ink) 55%, var(--bg));
  --swap: #C93A26;
  --sorted: #0B7A55;
  --pivot: #95600A;
}

:root[data-theme="dark"] {
  --bar: color-mix(in srgb, var(--ink) 38%, var(--bg));
  --swap: #FF8A78;
  --sorted: #5FD3A6;
  --pivot: #F2C14E;
}