/* ========================
   BASE.CSS
   Colors, variables, resets
   ======================== */

:root {
    /* Brand Colors */
    --brand-primary: #2B4C3F;
    --brand-primary-light: #3D6B5A;
    --brand-accent: #D4883A;
    --brand-accent-hover: #C07A30;

    /* Text */
    --text-heading: #1A1A1A;
    --text-body: #3D3D3D;
    --text-muted: #7A7A7A;
    --text-on-dark: #F5F2ED;
    --text-on-accent: #FFFFFF;

    /* Backgrounds */
    --bg-page: #FAFAF8;
    --bg-surface: #FFFFFF;
    --bg-surface-alt: #F0EDE7;
    --bg-dark: #1A1A1A;
    --bg-hero: var(--brand-primary);

    /* Borders & Dividers */
    --border-light: #E0DDD6;
    --border-medium: #C5C0B6;

    /* Interactive */
    --link-color: var(--brand-primary);
    --link-hover: var(--brand-primary-light);
    --button-bg: var(--brand-accent);
    --button-hover: var(--brand-accent-hover);
    --button-text: var(--text-on-accent);
    --subscribe-bg: var(--brand-primary);
    --subscribe-hover: var(--brand-primary-light);
    --subscribe-text: var(--text-on-dark);

    /* Nav */
    --nav-bg: var(--bg-surface);
    --nav-link: var(--text-body);
    --nav-link-hover: var(--brand-primary);
    --nav-link-active: var(--brand-accent);
    --nav-border: var(--border-light);

    /* Footer */
    --footer-bg: var(--bg-dark);
    --footer-text: var(--text-on-dark);
    --footer-link: var(--brand-accent);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* Widths */
    --content-width: 1100px;
    --narrow-width: 750px;

    /* Typography */
    --font-heading: 'Georgia', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', monospace;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-body);
    background: var(--bg-page);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-heading);
    line-height: 1.25;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

a {
    color: var(--link-color);
    text-decoration: none;
}

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

img {
    max-width: 100%;
    display: block;
}