* {
    box-sizing: border-box;
}

:root {
    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background:
        radial-gradient(1100px 650px at 20% 10%, rgba(79, 138, 107, .22), transparent 60%),
        radial-gradient(900px 550px at 75% 25%, rgba(194, 110, 46, .16), transparent 55%),
        radial-gradient(1200px 900px at 50% 120%, rgba(143, 217, 168, .10), transparent 55%),
        linear-gradient(180deg, var(--bg2), var(--bg));
    letter-spacing: .2px;
    min-height: 100vh;
}

@media screen and (max-width: 1199px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }
}

@supports not (overflow: clip) {
    @media screen and (max-width: 1199px) {
        html,
        body {
            overflow-x: hidden;
        }
    }
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--title-color);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* h1 is reserved for page titles, primarily handled in hero/header but defined here as base */
h1 {
    font-size: clamp(36px, 8vw, 48px);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 15px 45px rgba(0, 0, 0, .6);
}

h2 {
    font-size: clamp(28px, 4vw, 36px);
    letter-spacing: 2px;
}

h3 {
    font-size: clamp(24px, 3vw, 28px);
    letter-spacing: 1.5px;
}

h4 {
    font-size: 22px;
    letter-spacing: 1px;
}

h5 {
    font-size: 18px;
    letter-spacing: 0.5px;
}

h6 {
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

p {
    margin-bottom: 1rem;
    font-size: 16px;
}

a {
    color: var(--primary2);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent2);
}

code {
    font-family: var(--font-mono);
    background: rgba(143, 217, 168, 0.08);
    color: var(--primary2);
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-size: 85%;
    border: 1px solid rgba(143, 217, 168, 0.15);
}

/* Utility to ensure text colors respect theme */
.text-muted {
    color: var(--muted) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-accent2 {
    color: var(--accent2) !important;
}

body.modal-open {
    overflow: hidden;
}