:root {
    --bg: #f4f4f2;
    --bg-rgb: 244, 244, 242;
    --surface: #ffffff;
    --surface-hover: #ececea;
    --ui-bg: #ebebe8;
    --ui-bg-rgb: 235, 235, 232;
    --player-bg: #e4e4e0;
    --viz-bg: #ffffff;

    --text: #17171a;
    --text-2: #55555c;
    --text-mono: #6e6e76;
    --text-faint: #9b9ba2;

    --border: #d2d2ce;
    --border-soft: #e2e2de;

    --accent: #17171a;
    --danger: #7c372e;

    --accent-live: #17171a;
    --accent-green: #2e9c45;
    --accent-amber: #b7822c;
    --accent-white: #17171a;
    --accent-blue: #3d84b8;

    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius-sm: 2px;
    --radius: 4px;
    --radius-lg: 8px;
}

[data-theme="dark"] {
    --bg: #0c0c0d;
    --bg-rgb: 12, 12, 13;
    --surface: #0e0e0f;
    --surface-hover: #17171a;
    --ui-bg: #0e0e0f;
    --ui-bg-rgb: 14, 14, 15;
    --player-bg: #050506;
    --viz-bg: #000000;

    --text: #e8e8e6;
    --text-2: #a8a8ac;
    --text-mono: #8a8a8e;
    --text-faint: #5c5c60;

    --border: #232325;
    --border-soft: #1a1a1c;

    --accent: #e8e8e6;
    --danger: #c4756b;

    --accent-live: #d8d8d6;
    --accent-green: #33c24d;
    --accent-amber: #e0a83c;
    --accent-white: #d8d8d6;
    --accent-blue: #4da3e0;
}

[data-accent="green"] { --accent-live: var(--accent-green); }
[data-accent="amber"] { --accent-live: var(--accent-amber); }
[data-accent="white"] { --accent-live: var(--accent-white); }
[data-accent="blue"]  { --accent-live: var(--accent-blue); }