/* ──────────────────────────────────────────────
   Color Palette — change these to restyle the entire page.
   Values are space-separated RGB channels so Tailwind
   opacity modifiers (e.g. bg-neutral-200/60) keep working.
   ────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Accent (brand) color — bronze */
    --accent-500: 201 136 59;
    --accent-600: 180 115 45;
    --accent-700: 150 95 35;

    /* Neutral scale — currently zinc */
    --neutral-50: 255 248 237;
    --neutral-100: 250 242 230;
    --neutral-200: 228 228 231;
    --neutral-300: 212 212 216;
    --neutral-400: 161 161 170;
    --neutral-500: 113 113 122;
    --neutral-600: 82 82 91;
    --neutral-700: 63 63 70;
    --neutral-800: 39 39 42;
    --neutral-900: 27 35 59;
    --neutral-950: 15 19 35;
}

/* ── Base ─────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    background-color: #FFF8ED;
    color: #1B233B;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ── Components ───────────────────────────────── */

.glass {
    backdrop-filter: blur(10px);
    background: rgba(255, 248, 237, 0.7);
}

select {
    accent-color: #C9883B;
}

select option:checked,
select option:hover {
    background: #C9883B !important;
    color: #FFF8ED !important;
}

.hero-glow {
    background: radial-gradient(50% 60% at 50% 10%,
            rgb(var(--accent-500) / 0.15),
            transparent 60%);
}

/* ── Dust Particles ────────────────────────────── */

.dust-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(201, 136, 59, 0.9);
    box-shadow: 0 0 10px rgba(201, 136, 59, 0.5);
    animation: dust-float linear infinite;
}

@keyframes dust-float {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(-120px) translateX(30px) scale(0.6);
        opacity: 0;
    }
}