/* * Nest N Thrive — Foundations: Colors + Type * * Single import for design tokens AND semantic element styles. * Light + dark mode, both first-class. Source: design/design-system.md (v0.2, ratified 2026-04-25). * * Usage: * * for manual dark; omit to follow prefers-color-scheme. */ /* ───────────────────────── Web fonts (Google) ───────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap"); /* ───────────────────────── Tokens — Light (default) ───────────────────────── */ :root { /* Surfaces */ --color-bg: #FAF8F5; --color-bg-subtle: #F2EEE8; --color-bg-strong: #E5DFD7; /* Text */ --color-text: #1A1A1A; --color-text-secondary: #5C5C5C; --color-text-muted: #8A8580; --color-text-inverse: #FAF8F5; /* Brand — forest green (wellness, trust) */ --color-brand: #2D5F4E; --color-brand-muted: #4A7E6F; --color-brand-deep: #1F4538; /* Accent — terracotta. CTAs only. */ --color-accent: #C5673E; --color-accent-hover: #A8542F; --color-accent-muted: #E8C9B4; /* Semantic */ --color-success: #4A6B3A; --color-error: #A23E2A; --color-rating-star: #D4A017; /* Borders */ --color-border: #E5DFD7; --color-border-strong: #C9C0B5; /* Focus ring */ --color-focus: var(--color-accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Type families */ --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale (Major Third 1.25, snapped to 8pt) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 2rem; /* 32 */ --text-4xl: 2.5rem; /* 40 */ --text-5xl: 3.5rem; /* 56 */ --text-6xl: 4.5rem; /* 72 */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing — 8pt grid */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-12: 6rem; /* 96 */ --space-16: 8rem; /* 128 */ /* Layout */ --max-w-prose: 42.5rem; /* 680 */ --max-w-content: 55rem; /* 880 */ --max-w-hero: 60rem; /* 960 -- editorial hero blocks */ --max-w-page: 75rem; /* 1200 */ --sidebar-w: 17.5rem; /* 280 */ --header-h: 4rem; --header-h-desktop: 5rem; /* Section rhythm: semantic aliases for the most-used vertical spacing */ --space-section-y: 6rem; /* 96 -- desktop section gap */ --space-section-y-mobile: 4rem; /* 64 -- mobile section gap */ /* Borders / radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --border-w: 1px; --border-w-strong: 2px; /* Elevation. Used sparingly. */ --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05); --shadow-md: 0 2px 8px rgba(26, 26, 26, 0.06); --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.08); --shadow-card-hover: 0 8px 24px rgba(26, 26, 26, 0.10); /* Tinted surfaces */ --color-rating-gold-bg: rgba(212, 160, 23, 0.10); --gradient-warm: linear-gradient(135deg, var(--color-bg-subtle), var(--color-bg-strong)); /* Motion */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-deliberate: 600ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Z-index */ --z-base: 1; --z-sticky: 10; --z-header: 100; --z-overlay: 500; --z-modal: 1000; } /* ───────────────────────── Tokens — Dark (system + manual) ───────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #1A1817; --color-bg-subtle: #232120; --color-bg-strong: #3A3735; --color-text: #F2EEE8; --color-text-secondary: #B8B0A8; --color-text-muted: #8A8580; --color-text-inverse: #1A1817; --color-brand: #5BA890; --color-brand-muted: #4A7E6F; --color-brand-deep: #7BC9B0; --color-accent: #D67550; --color-accent-hover: #E08861; --color-accent-muted: #6B3D27; --color-success: #6B8B5A; --color-error: #C5563E; --color-rating-star: #E8B530; --color-border: #3A3735; --color-border-strong: #5C5750; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.55); --color-rating-gold-bg: rgba(232, 181, 48, 0.14); } } :root[data-theme="dark"] { --color-bg: #1A1817; --color-bg-subtle: #232120; --color-bg-strong: #3A3735; --color-text: #F2EEE8; --color-text-secondary: #B8B0A8; --color-text-muted: #8A8580; --color-text-inverse: #1A1817; --color-brand: #5BA890; --color-brand-muted: #4A7E6F; --color-brand-deep: #7BC9B0; --color-accent: #D67550; --color-accent-hover: #E08861; --color-accent-muted: #6B3D27; --color-success: #6B8B5A; --color-error: #C5563E; --color-rating-star: #E8B530; --color-border: #3A3735; --color-border-strong: #5C5750; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.55); --color-rating-gold-bg: rgba(232, 181, 48, 0.14); } /* ───────────────────────── Reduced motion ───────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ───────────────────────── Semantic element styles ───────────────────────── */ html { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 100%; line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard); } body { margin: 0; font-size: var(--text-base); color: var(--color-text); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); line-height: var(--leading-snug); } h5 { font-size: var(--text-xl); line-height: var(--leading-snug); } h6 { font-size: var(--text-lg); line-height: var(--leading-snug); } @media (max-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } } p { margin: 0 0 var(--space-4); max-width: var(--max-w-prose); text-wrap: pretty; } small, .text-meta { font-size: var(--text-sm); color: var(--color-text-secondary); } /* Eyebrow — small all-caps label */ .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); } /* Lead / TL;DR — italic serif */ .lead { font-family: var(--font-serif); font-style: italic; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--color-text); font-weight: var(--weight-regular); } a { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--duration-fast) var(--easing-standard); } a:hover { color: var(--color-brand-deep); } /* Focus ring — accessibility, only shown for keyboard users via :focus-visible. */ :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Suppress the persistent focus outline on links + buttons after a mouse click. * Keyboard users still get the focus ring via :focus-visible above. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } hr { border: 0; border-top: var(--border-w) solid var(--color-border); margin: var(--space-8) 0; } /* Selection */ ::selection { background: var(--color-accent-muted); color: var(--color-text); }