:root {
    color-scheme: dark;

    --rockola-bg: #09090b;
    --rockola-surface: #111114;
    --rockola-surface-raised: #18181c;
    --rockola-surface-hover: #202026;
    --rockola-border: rgba(255, 255, 255, 0.08);

    --rockola-text: #f7f7f8;
    --rockola-text-muted: #a1a1aa;
    --rockola-text-soft: #71717a;

    --rockola-accent: #d8ff3e;
    --rockola-accent-strong: #bff000;
    --rockola-on-accent: #09090b;

    --rockola-danger: #ff5d73;

    --rockola-radius-sm: 10px;
    --rockola-radius-md: 16px;
    --rockola-radius-lg: 24px;
    --rockola-radius-pill: 999px;

    --rockola-sidebar-width: 240px;
    --rockola-header-height: 72px;
    --rockola-player-height: 92px;

    --rockola-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

    --rockola-transition: 160ms ease;
}

html {
    background: var(--rockola-bg);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--rockola-bg);
    color: var(--rockola-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

::selection {
    background: var(--rockola-accent);
    color: var(--rockola-on-accent);
}