/* * base.css — DayAfter design tokens, reset, and global defaults * * This file is the single source of truth for: * - CSS custom properties (light + dark) * - Box-model reset * - Body typography defaults * - Default link style * - Container widths * * Every page on dayafter.app loads this file. * Font imports live in each HTML so the browser can preconnect. * * Last updated: 2026-04-28 */ /* ── Light theme tokens ────────────────────────────────── */ :root { /* Typography */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Lora', Georgia, serif; /* Surfaces */ --bg: #F2EBE4; --bg-warm: #E8DFD5; --bg-dark: #1A1614; --bg-overlay: rgba(242,235,228,0.92); --white: #FEFDFB; /* Text */ --ink: #2C2420; --ink-soft: #6B5E56; --ink-faint: #6F635B; --ink-on-dark: #D0CBC6; --ink-on-accent:#FFFFFF; /* Accent — primary action colour */ --accent: #2B6B4F; --accent-hover: #235A42; --accent-light: #E8F2ED; /* Semantic — warnings, alerts */ --warn: #C05621; --warn-bg: #FDF6EE; /* Structure — borders, radii, shadows */ --border: #DDD4CA; --border-subtle:rgba(255,255,255,0.12); --radius: 8px; --radius-sm: 6px; --shadow: 0 1px 3px rgba(44,36,32,0.06); } /* ── Dark theme tokens ─────────────────────────────────── */ html.dark { color-scheme: dark; /* Surfaces */ --bg: #161311; --bg-warm: #1E1A17; --bg-dark: #0E0C0A; --bg-overlay: rgba(22,19,17,0.92); --white: #1A1614; /* Text */ --ink: #EDE8E3; --ink-soft: #A89E96; --ink-faint: #8A8078; --ink-on-dark: #A89E96; --ink-on-accent:#0A1A12; /* Accent */ --accent: #5BA882; --accent-hover: #4A9672; --accent-light: #1A2E24; /* Semantic */ --warn: #D4813A; --warn-bg: #2A1E14; /* Structure */ --border: #2A2522; --border-subtle:rgba(255,255,255,0.08); --shadow: 0 1px 3px rgba(0,0,0,0.3); } /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* smooth scroll handled by JS easeInOutCubic — see index.html */ } /* ── Body defaults ─────────────────────────────────────── */ /* * font-family, colour, and line-height are set here so every * page inherits them automatically. The ultrawide cap (3440px) * prevents the layout from stretching on very wide monitors. */ body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; max-width: 3440px; margin: 0 auto; } /* ── Links ─────────────────────────────────────────────── */ /* * Default: inherit colour, no underline. * Pages with prose content (blog posts, legal) override this * to use var(--accent) in their own stylesheet. */ a { color: inherit; text-decoration: none; } /* ── Containers ────────────────────────────────────────── */ /* * Two widths used across the site: * .container — 42.5rem (680px) — prose, blog posts, forms * .container-wide — 60rem (960px) — nav bar, footer, wider layouts * * Padding is 1rem (16px) on mobile, increased at tablet breakpoint * in layout.css. */ .container { max-width: 42.5rem; margin: 0 auto; padding: 0 1rem; } .container-wide { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }