:root {
    /* Colors — matched from source Tailwind classes */
    --bg: #0a0a0a;
    --accent: #C26D28;
    --accent-hover: #a85a20;
    --accent-hover-light: #d47a35; /* lighter hover for large CTAs */
    --white: #ffffff;
    --white-80: rgba(255,255,255,0.8);
    --white-70: rgba(255,255,255,0.7);
    --white-60: rgba(255,255,255,0.6);
    --white-50: rgba(255,255,255,0.5);
    --white-30: rgba(255,255,255,0.3);
    --white-25: rgba(255,255,255,0.25);
    --white-20: rgba(255,255,255,0.2);
    --white-10: rgba(255,255,255,0.1);
    --white-5: rgba(255,255,255,0.05);

    /* Typography — Montserrat for headings/nav, system for body */
    --font: 'Montserrat', sans-serif;

    /* Container */
    --max-w: 1280px;
    --max-w-narrow: 1152px; /* max-w-6xl */
    --px: 16px;

    /* Section spacing — varies per section on live site */
    --section-py: 64px;
    --section-py-sm: 48px;
    --section-py-lg: 80px;
    --section-py-xl: 96px;

    /* Grid gaps */
    --gap-3: 12px;
    --gap-6: 24px;
    --gap-8: 32px;
    --gap-12: 48px;
}