:root {
    --color-bg: #0a0a0d;
    --color-surface: #121217;
    --color-surface-2: #1a1a21;
    --color-surface-3: #25252e;
    --color-line: rgb(255 255 255 / 0.09);
    --color-line-strong: rgb(255 255 255 / 0.2);

    --color-text: #f4f3f8;
    --color-muted: #8e8c9b;
    --color-faint: #57556a;

    --color-primary: #5b3cff;
    --color-primary-strong: #7a5fff;
    --color-primary-soft: rgb(91 60 255 / 0.14);
    --color-on-primary: #ffffff;

    --color-success: #c4f24f;
    --color-on-success: #0a0a0d;
    --color-danger: #ff5c5c;
    --color-warning: #ffd04d;

    --player-0: #ff6b9a;
    --player-1: #4fd8ff;
    --player-2: #ffd04d;
    --player-3: #c4f24f;
    --player-4: #ff8f4d;
    --player-5: #b79cff;
    --player-6: #ff7de0;
    --player-7: #5fe3b4;
    --player-8: #6ea8ff;
    --player-9: #7be06a;
    --player-10: #ff7b6b;
    --player-11: #f4f3f8;
    --player-12: #2fd0c8;
    --player-13: #c98a5b;
    --player-14: #a9b6d3;
    --player-15: #e8d98f;

    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-label: 'Satoshi', 'Inter', system-ui, sans-serif;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-pill: 999px;
    --hairline: 1px solid var(--color-line);

    --space-unit: 8px;
    --space-1: calc(var(--space-unit) * 0.5);
    --space-2: var(--space-unit);
    --space-3: calc(var(--space-unit) * 1.5);
    --space-4: calc(var(--space-unit) * 2);
    --space-5: calc(var(--space-unit) * 3);
    --space-6: calc(var(--space-unit) * 4);
    --space-7: calc(var(--space-unit) * 6);
    --space-8: calc(var(--space-unit) * 8);

    --dur-fast: 160ms;
    --dur-base: 320ms;
    --dur-slow: 700ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --tap-min: 56px;

    color-scheme: dark;
}