/* =============================================
   Base Styles
   ============================================= */

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

*, *::before, *::after {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}

html { 
    font-size: var(--font-size-base); 
    scroll-behavior: smooth; 
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography elements */
h1 { font-size: var(--font-size-h1); font-weight: 700; margin-bottom: var(--space-xs); }
h2 { font-size: var(--font-size-h2); font-weight: 600; }
h3 { font-size: var(--font-size-h3); font-weight: 600; margin-bottom: var(--space-xs); }
p { margin-bottom: var(--space-md); }

a { color: var(--blue); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--blue-light); }

/* Utility Classes */
.text-green { color: var(--green-dark) !important; }
.text-red { color: var(--red) !important; }
.text-blue { color: var(--blue) !important; }
.text-amber { color: var(--amber) !important; }
.text-muted { color: var(--text-muted) !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

.hidden-mobile { display: none !important; }
.hidden-desktop { display: block !important; }

@media (min-width: 768px) {
    .hidden-mobile { display: block !important; }
    .hidden-desktop { display: none !important; }
}

/* Section headers (from old style) */
.section-header {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: var(--space-lg) 0 var(--space-sm);
}

.page-header-sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}