/* ===========================================
   BASE STYLES & UTILITIES
   ========================================= */
@import url('tokens.css');

/* CSS Reset & Base Elements */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--color-beige); color: var(--color-dark-brown); margin: 0; }
body.no-scroll { overflow: hidden; }
a { color: var(--color-gold); text-decoration: none; transition: color 0.2s; }
a:hover, a:focus { color: var(--color-dark-gold); text-decoration: underline; }
p { margin: 0 0 1em 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-darker-brown); margin: 0 0 0.5em 0; font-weight: 700; }
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }
ul { list-style: none; padding: 0; }
ol { list-style: decimal; padding-left: 1.5em; }

/* Utility Classes (flex, grid, spacing, text, etc.) */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-accent { font-family: var(--font-accent); }
.font-mono { font-family: var(--font-monospace); }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }
.text-gold { color: var(--color-gold); }
.text-dark-gold { color: var(--color-dark-gold); }
.text-light-gold { color: var(--color-light-gold); }
.text-dark-brown { color: var(--color-dark-brown); }
.text-darker-brown { color: var(--color-darker-brown); }
.text-white { color: #fff; }
.text-black { color: #000; }
.w-full { width: 100%; }
h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }