/* ===================================================================== Boreal Turf — Design Tokens Colors, type, spacing, radii, shadows, motion. Import this file once at the document root. ===================================================================== */ /* Fonts: substituted from Google Fonts. Replace with self-hosted .woff2 if/when the brand commissions custom files. */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ───── Color: brand ───── */ --forest: #1F3D2E; --forest-deep: #0F2419; --moss: #5C7A52; --moss-soft: #A8B89B; /* ───── Color: canvas + neutrals ───── */ --cream: #F4EFE3; /* page bg */ --paper: #FAF6EC; /* cards, raised surfaces */ --bone: #E8E1D0; /* dividers, muted surfaces */ --bone-deep: #D4CDB8; /* ───── Color: ink ───── */ --ink: #1A1815; --ink-2: #4A453E; --ink-3: #857F73; --ink-on-dark: #F4EFE3; /* ───── Color: accent + semantic ───── */ --clay: #C04A1F; --clay-deep: #8E3315; --clay-soft: #E8B499; --citrus: #C8E14A; /* compare-strip "ours" column */ --stone: #B8B0A0; /* compare-strip "cheap turf" column */ --stone-deep: #6F695E; --rust: #A0521C; /* warning */ --sky: #4A7A8C; /* info — used sparingly */ --success: var(--moss); --warning: var(--rust); --danger: #B03A2E; --info: var(--sky); /* ───── Type: families ───── */ --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ───── Type: scale ───── Format: size / line-height */ --display-xl: 72px; --display-xl-lh: 68px; --display-l: 56px; --display-l-lh: 56px; --display-m: 40px; --display-m-lh: 44px; --h1: 32px; --h1-lh: 36px; --h2: 24px; --h2-lh: 30px; --h3: 18px; --h3-lh: 26px; --body-l: 18px; --body-l-lh: 28px; --body: 16px; --body-lh: 26px; --body-s: 14px; --body-s-lh: 22px; --caption: 12px; --caption-lh: 18px; --mono-price: 20px; --mono-price-lh: 24px; --mono-spec: 13px; --mono-spec-lh: 20px; /* ───── Spacing: 8px base ───── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ───── Radii ───── */ --radius-xs: 2px; --radius-s: 4px; --radius-m: 6px; --radius-l: 10px; --radius-xl: 16px; --radius-pill: 999px; /* used in exactly one place: floating sample CTA */ /* ───── Shadows: tinted with forest, never neutral gray ───── */ --shadow-soft: 0 1px 2px rgba(15, 36, 25, 0.06), 0 4px 12px rgba(15, 36, 25, 0.04); --shadow-lift: 0 4px 8px rgba(15, 36, 25, 0.08), 0 16px 32px rgba(15, 36, 25, 0.10); /* ───── Borders ───── */ --border-subtle: 1px solid var(--bone); --border-default: 1px solid var(--bone-deep); --border-strong: 1px solid var(--ink); --border-input: 1px solid var(--ink-3); --border-focus: 2px solid var(--forest); /* ───── Motion ───── */ --ease-boreal: cubic-bezier(0.32, 0.72, 0, 1); --dur-micro: 150ms; --dur-base: 240ms; --dur-reveal: 400ms; /* ───── Layout ───── */ --max-marketing: 1280px; --max-app: 1120px; --max-prose: 680px; } /* ===================================================================== Semantic element styles — opt in by adding `.boreal` to (or any ancestor). Don't auto-style raw tags globally; many surfaces need to escape this. ===================================================================== */ .boreal { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: var(--body); line-height: var(--body-lh); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .boreal h1, .boreal .h1, .boreal h2, .boreal .h2, .boreal h3, .boreal .h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .boreal h1, .boreal .h1 { font-size: var(--h1); line-height: var(--h1-lh); } .boreal h2, .boreal .h2 { font-size: var(--h2); line-height: var(--h2-lh); } .boreal h3, .boreal .h3 { font-size: var(--h3); line-height: var(--h3-lh); } .boreal .display-xl, .boreal .display-l, .boreal .display-m { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .boreal .display-xl { font-size: var(--display-xl); line-height: var(--display-xl-lh); } .boreal .display-l { font-size: var(--display-l); line-height: var(--display-l-lh); } .boreal .display-m { font-size: var(--display-m); line-height: var(--display-m-lh); } .boreal p, .boreal .body { font-size: var(--body); line-height: var(--body-lh); margin: 0; } .boreal .body-l { font-size: var(--body-l); line-height: var(--body-l-lh); } .boreal .body-s { font-size: var(--body-s); line-height: var(--body-s-lh); } .boreal .caption { font-size: var(--caption); line-height: var(--caption-lh); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .boreal .mono-price { font-family: var(--mono); font-size: var(--mono-price); line-height: var(--mono-price-lh); font-weight: 500; letter-spacing: -0.01em; } .boreal .mono-spec { font-family: var(--mono); font-size: var(--mono-spec); line-height: var(--mono-spec-lh); color: var(--ink-2); } .boreal a { color: var(--clay); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; transition: text-decoration-thickness var(--dur-micro) var(--ease-boreal); } .boreal a:hover { text-decoration-thickness: 3px; } .boreal hr { border: 0; border-top: var(--border-subtle); margin: var(--space-6) 0; }