:root {
    --clr-bg: #111111;
    --clr-surface: #1C1C1C;
    --clr-surface-hover: #272727;
    --clr-border: #363636;
    --clr-gold: #FFFFFF;
    --clr-gold-bright: #E5E5E5;
    --clr-accent: #FBBF24;
    --clr-text: #F5F5F5;
    --clr-muted: #999999;
    --clr-dim: #666666;
    --clr-green: #22C55E;
    --clr-red: #EF4444;
    --ff-heading: 'Syne', system-ui, sans-serif;
    --ff-body: 'Work Sans', system-ui, sans-serif;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
    --fs-xs: 0.6875rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem;
    --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
    --fs-3xl: 2rem; --fs-4xl: 2.5rem; --fs-5xl: 3.25rem;
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;
    --max-w: 1180px; --max-w-narrow: 720px; --gutter: 20px;
    --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-full:9999px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--clr-border);
    --ease: cubic-bezier(0.4,0,0.2,1); --dur: 200ms;
}