:root {
    /* Surfaces — layered charcoal (sidebar darkest, main panel lighter) */
    --bg-base: #0c0c0e;
    --bg-elevated: #101012;
    --bg-panel: #16161a;
    --bg-surface: #1c1c21;
    --bg-surface-hover: #242429;
    --bg-card: #1e1e24;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #9a9aa3;
    --text-muted: #6b6b75;

    /* Borders — barely visible */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-highlight: rgba(244, 196, 48, 0.5);

    /* Accent — warm yellow (serivia-style) */
    --accent-primary: #f4c430;
    --accent-secondary: #ffda55;
    --accent-glow: rgba(244, 196, 48, 0.4);
    --accent-soft: rgba(244, 196, 48, 0.14);
    --accent-on: #121214;

    --success: #34d399;
    --error: #f87171;

    /* Radii — soft, rounded everywhere */
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-2xl: 32px;
    --radius-pill: 999px;
    --radius-poster: 20px;

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-width: 260px;
    --topbar-height: 76px;
    --bottom-nav-height: 64px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --content-max: 1480px;

    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-poster: 0 8px 28px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 0 0 1px var(--border-color);

    --font-sans: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;

    --poster-title-size: 0.9375rem;
    --poster-title-line-height: 1.35;
    --poster-title-lines: 2;
    --poster-title-min-height: calc(
        var(--poster-title-size) * var(--poster-title-line-height) * var(--poster-title-lines)
    );
    --poster-meta-size: 0.8125rem;
}