:root {
    /* Base palette - dark hero/nav/footer stay dark in both themes;
       body sections, text and "invert spotlight" cards flip between light/dark theme */
    --color-bg: #0b0b0d;
    --color-bg-soft: #111114;
    --color-surface: #ffffff;
    --color-surface-alt: #f6f6f8;
    --color-border: #e7e7ea;
    --color-text: #0e0e10;
    --color-text-muted: #6b6b73;
    --color-text-on-dark: #f5f5f7;
    --color-text-on-dark-muted: #a8a8b0;
    --color-accent: #6d5bf0;
    --color-accent-hover: #5a49dd;
    --color-black: #101012;

    /* "Invert" tokens: used by spotlight cards (next gig, promo banners, buttons)
       that must always contrast against the surrounding page, whichever theme is active */
    --color-invert-bg: #101012;
    --color-invert-bg-hover: #000000;
    --color-invert-text: #f5f5f7;
    --color-invert-text-muted: #a8a8b0;
    --color-invert-overlay-weak: rgba(255, 255, 255, 0.06);
    --color-invert-overlay-mid: rgba(255, 255, 255, 0.12);
    --color-invert-overlay-strong: rgba(255, 255, 255, 0.18);
    --color-invert-border: rgba(255, 255, 255, 0.25);

    --font-heading: 'Sora', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --container-max: 1240px;
    --nav-clearance: 96px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] {
    --color-surface: #17171d;
    --color-surface-alt: #1e1e25;
    --color-border: #303039;
    --color-text: #f2f2f4;
    --color-text-muted: #a5a5af;

    --color-invert-bg: #f2f2f4;
    --color-invert-bg-hover: #ffffff;
    --color-invert-text: #101012;
    --color-invert-text-muted: #57575f;
    --color-invert-overlay-weak: rgba(16, 16, 18, 0.05);
    --color-invert-overlay-mid: rgba(16, 16, 18, 0.08);
    --color-invert-overlay-strong: rgba(16, 16, 18, 0.14);
    --color-invert-border: rgba(16, 16, 18, 0.18);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);
}