:root {
    /* Color Palette - Premium Gold & Black */
    --primary-dark: #000000;
    --bg-secondary: #0A0A0A;
    /* Slightly lighter for cards/sections */

    --premium-gold: #D4AF37;
    --accent-dark-gold: #9D7E1F;
    --premium-silver: #E8E8E8;

    /* Functional Colors */
    --text-color: var(--premium-silver);
    --bg-color: var(--primary-dark);
    --grid-line: rgba(212, 175, 55, 0.1);
    /* Gold tint for grid */

    /* Breakpoints (Reference for JS/Media Queries) */
    --bp-sm: 375px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;
    --bp-2xl: 1920px;
    --bp-3xl: 2560px;

    /* Fluid Typography Scale (Perfect Fourth 1.333) */
    /* Base: 14px (mobile) -> 18px (desktop) -> 20px (TV) */
    --fs-base: clamp(14px, 1vw + 12px, 20px);

    /* Scale Steps */
    --fs-sm: clamp(16px, 1.1vw + 13px, 24px);
    /* Base * 1.333 */
    --fs-md: clamp(21px, 1.5vw + 17px, 32px);
    /* Base * 1.333^2 */
    --fs-lg: clamp(28px, 2vw + 22px, 42px);
    /* Base * 1.333^3 */
    --fs-xl: clamp(37px, 2.7vw + 29px, 56px);
    /* Base * 1.333^4 */
    --fs-xxl: clamp(49px, 3.6vw + 38px, 75px);
    /* Base * 1.333^5 */
    --fs-3xl: clamp(65px, 4.8vw + 50px, 100px);
    /* Base * 1.333^6 */

    /* Font Families */
    --font-heading: 'IBM Plex Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing Scale (Desktop Base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 60px;
    --space-5xl: 80px;
    --space-6xl: 120px;
    --space-7xl: 180px;
}

/* Tablet Spacing (Reduce by 20%) */
@media (max-width: 1024px) {
    :root {
        --space-xs: 3px;
        --space-sm: 6px;
        --space-md: 13px;
        --space-lg: 19px;
        --space-xl: 26px;
        --space-2xl: 32px;
        --space-3xl: 38px;
        --space-4xl: 48px;
        --space-5xl: 64px;
        --space-6xl: 96px;
        --space-7xl: 144px;
    }
}

/* Mobile Spacing (Reduce by 30%) */
@media (max-width: 768px) {
    :root {
        --space-xs: 3px;
        --space-sm: 6px;
        --space-md: 11px;
        --space-lg: 17px;
        --space-xl: 22px;
        --space-2xl: 28px;
        --space-3xl: 34px;
        --space-4xl: 42px;
        --space-5xl: 56px;
        --space-6xl: 84px;
        --space-7xl: 126px;
    }
}