@layer theme, base, components, utilities;

@layer theme {
    :root {
        --font-heading: "Playfair Display", serif;
        --font-body: "Roboto", sans-serif;
        --color-brand: #0088ff;
        --color-brand-dark: #0072d6;
    }
}

@layer base {
    body {
        font-family: var(--font-body);
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
    }
}

@layer components {
    .glass-header {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
    }
}