@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    color-scheme: dark;
    --ink: #f7f2ea;
    --muted: rgba(247, 242, 234, 0.66);
    --faint: rgba(247, 242, 234, 0.42);
    --line: rgba(255, 255, 255, 0.12);
    --panel: rgba(255, 255, 255, 0.055);
    --panel-strong: rgba(255, 255, 255, 0.09);
    --gold: #f6b35a;
    --coral: #ff6b4a;
    --blue: #7cc9ff;
    --green: #75f0b0;
}

* { box-sizing: border-box; }

html {
    background: #030407;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #030407;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

.glass {
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}