/* ============================================================
   BASE — reset + typography defaults
   ============================================================ */

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

* { margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

h1 { font-size: var(--text-3xl); line-height: 1.1; }
h2 { font-size: var(--text-2xl); line-height: 1.15; }
h3 { font-size: var(--text-xl);  line-height: 1.3; }
h4 { font-size: var(--text-lg);  line-height: 1.4; }

a { color: var(--color-text-primary); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: rgba(29,78,216,0.06);
    border: 1px solid var(--color-border-default);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    color: var(--color-info-text);
}

/* Container */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-fluid {
    width: 100%;
    padding: 0 10px;
}

/* Page padding below nav */
.page { padding: 3rem 0; }

/* Page header */
.page-header {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-default);
}
.page-header h1 { margin-bottom: 0.25rem; }
.page-header p  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }