/* base.css — design tokens + global defaults. ONE job: define the visual vocabulary every page shares. Layout and components live in their own files. CSS custom properties ("variables") are declared once on :root and used everywhere as var(--name). Change a brand color here → whole site updates. */ :root { /* Brand palette (from the design prototype) */ --green: #2F5D3E; /* primary brand green */ --green-deep: #22402C; /* dark backgrounds (hero, footer) */ --ink: #23281F; /* near-black text on light surfaces */ --cream: #FAF7F0; /* warm page background / text on dark green */ --gold: #C98A2B; /* accent: highlights, calls-to-action */ /* Supporting neutrals (extracted from the decoded template) */ --muted: #5C6153; /* secondary body text on light */ --body-strong: #40453A; /* long-form paragraphs on light */ --border: #E5E0D2; /* hairline card/section borders */ --tan: #EFEADC; /* soft chip / highlight background */ --tan-deep: #E4D9BC; /* decorative photo backdrop */ --sage: #BFCDB8; /* muted text on dark green */ --sage-dim: #7E9077; /* dimmest text on dark green */ --banner-text: #E9E4D6; /* quote banner text on dark green */ /* Type families — loaded in each page's . Display face for big headlines, body face for everything else. */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Public Sans', sans-serif; /* Spacing scale — consistent gaps beat pixel-perfect improvisation */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; --radius: 14px; /* rounded corners, one value site-wide */ --content-max: 1120px; /* page content never grows wider than this */ } /* Minimal reset: strip inconsistent browser defaults so we style from zero */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; /* display faces read better slightly tightened */ } img { max-width: 100%; display: block; } /* images never overflow their box */ a { color: inherit; }