/* ========================================================================== Base reset & defaults -------------------------------------------------------------------------- Purpose: a floor for the whole site to stand on while you strip out the old template's CSS page by page. Every rule here targets bare HTML elements (low specificity) so: - old template classes can still override it where old markup remains - new Tailwind utility classes always win (utilities load after this and/or are equal-or-higher specificity) Load order in your layout : 1. this file (base-reset.css) 2. Tailwind's compiled output (or CDN script) 3. any remaining old template CSS you haven't removed yet 4. page-specific overrides, if any This is plain CSS on purpose — it works whether or not a given page is running through the Tailwind build yet, so it's safe to ship before the Tailwind migration is finished. If your project runs Preflight (Tailwind's own reset) on every page already, this file is mostly redundant with it and harmless to run alongside it. If you'd rather not double up, set `corePlugins: { preflight: false }` in tailwind.config.js and let this file be the single reset instead. ========================================================================== */ /* ---- Design tokens ------------------------------------------------------- Same palette as the header: slate ink, emerald accent, stone neutrals, Inter for body text, Fraunces for display/heading moments. Keeping these as variables means both old leftover pages and new Tailwind pages can reference the same source of truth via var(--color-...). */ :root { --color-ink: #0f172a; /* slate-900 */ --color-ink-soft: #64748b; /* slate-500 */ --color-accent: #047857; /* emerald-700 */ --color-accent-soft: #ecfdf5;/* emerald-50 */ --color-surface: #ffffff; --color-muted: #fafaf9; /* stone-50 */ --color-line: #e7e5e4; /* stone-200 */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Fraunces', Georgia, serif; --radius: 10px; } /* ---- Box model ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Base document ----------------------------------------------------- */ body { margin: 0; min-height: 100vh; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Headings & text ---------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-ink); } p { margin: 0; } small { color: var(--color-ink-soft); } /* ---- Lists --------------------------------------------------------------- Bare