:root {
    /* Colour palette */
    --bg:             #0d1117;
    --surface:        #161b22;
    --surface-raised: #21262d;
    --surface-hover:  #2d333b;
    --border:         #30363d;
    --border-subtle:  #21262d;

    --text-primary:   #e6edf3;
    --text-secondary: #8b949e;
    --text-muted:     #484f58;

    --accent:         #58a6ff;
    --accent-hover:   #79c0ff;
    --accent-muted:   rgba(88, 166, 255, 0.1);

    --success:        #3fb950;
    --success-muted:  rgba(63, 185, 80, 0.1);
    --error:          #f85149;
    --error-muted:    rgba(248, 81, 73, 0.1);
    --warning:        #d29922;
    --warning-muted:  rgba(210, 153, 34, 0.1);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    --font-size-xs:  11px;
    --font-size-sm:  13px;
    --font-size-md:  14px;
    --font-size-lg:  16px;
    --font-size-xl:  20px;
    --font-size-2xl: 24px;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radii */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    /* Layout */
    --header-height: 60px;
    --player-height: 80px;
    --sidebar-width: 240px;

    /* Transitions */
    --transition: 0.15s ease;
}