/* StarX — Design tokens (mirrors DESIGN.md) */
:root {
    /* ── Surfaces ─────────────────────────────────── */
    --surface: #131313;
    --surface-dim: #131313;
    --surface-bright: #3a3939;
    --surface-container-lowest: #0e0e0e;
    --surface-container-low: #1c1b1b;
    --surface-container: #201f1f;
    --surface-container-high: #2a2a2a;
    --surface-container-highest: #353534;
    --background: #131313;
    --on-background: #e5e2e1;
    --on-surface: #e5e2e1;
    --on-surface-variant: #d0c5af;
    --outline: #99907c;
    --outline-variant: #4d4635;

    /* ── Brand: Gold ──────────────────────────────── */
    --primary: #f2ca50;
    --primary-container: #d4af37;       /* DESIGN.md: Primary Gold */
    --primary-burnished: #c5a028;       /* DESIGN.md: Burnished Gold (hover) */
    --primary-shadow: #8c6a1b;          /* DESIGN.md: Shadow Gold */
    --on-primary: #3c2f00;
    --secondary: #eac249;
    --tertiary: #f4c871;

    /* ── Status ───────────────────────────────────── */
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    /* ── Typography ───────────────────────────────── */
    --font-display: 'Noto Serif', Georgia, serif;
    --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-headline-xl: 64px;
    --fs-headline-lg: 48px;
    --fs-headline-md: 32px;
    --fs-body-lg: 18px;
    --fs-body-md: 16px;
    --fs-label-caps: 12px;

    /* ── Shape ────────────────────────────────────── */
    --r-sm: 0.125rem;
    --r-default: 0.25rem;
    --r-md: 0.375rem;
    --r-lg: 0.5rem;
    --r-xl: 0.75rem;
    --r-full: 9999px;

    /* ── Spacing ──────────────────────────────────── */
    --space-base: 8px;
    --container-max: 1280px;
    --gutter: 24px;
    --margin-x: 80px;
    --section-gap: 120px;

    /* ── Effects ──────────────────────────────────── */
    --bloom-gold: 0 0 20px rgba(212, 175, 55, 0.15);
    --bloom-gold-strong: 0 0 60px rgba(212, 175, 55, 0.28), 0 0 120px rgba(212, 175, 55, 0.12);
    --inner-stroke-gold: inset 0 0 0 1px rgba(212, 175, 55, 0.20);
    --gradient-metallic-gold: linear-gradient(135deg, #ffe088 0%, #d4af37 35%, #8c6a1b 65%, #d4af37 100%);
    --gradient-text-gold: linear-gradient(180deg, #ffe088 0%, #d4af37 50%, #8c6a1b 100%);
}

@media (max-width: 768px) {
    :root {
        --fs-headline-xl: 40px;
        --fs-headline-lg: 32px;
        --fs-headline-md: 24px;
        --margin-x: 24px;
        --section-gap: 64px;
    }
}