/* ============================================================ CULTIVATING CALM — Foundations Warm-neutral editorial palette + classical serif/humanist sans pairing. Tokens are organized as: 1. Raw palette (--clay-500, --ink-900 …) 2. Semantic colors (--fg, --bg, --accent …) 3. Type primitives (--font-display, --leading-tight …) 4. Semantic typography (--type-h1, --type-eyebrow …) 5. Spacing, radii, shadows, motion ============================================================ */ /* ---------- 1. Webfonts ---------- */ /* Display: Cormorant Garamond — warm classical, high-contrast. Body: Manrope — humanist geometric, neutral & calm. NOTE: Loaded from Google Fonts CDN. If working offline, the .woff2 files should live in /fonts/. Substitution flagged in README. */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@300;400;500;600;700&display=swap"); :root { /* ============================================================ 1. RAW PALETTE — never use directly outside this file. ============================================================ */ /* Bone / warm whites — primary surface family */ --bone-50: #FBF7F0; /* near-white cream, default page surface */ --bone-100: #F4EEE4; /* bone — softer background */ --bone-200: #ECE3D2; /* warm ivory, card surfaces on bone */ --bone-300: #E0D2BB; /* sand */ --bone-400: #CDBA9C; /* sand+ */ /* Clay / terracotta — primary accent family */ --clay-300: #D9B299; --clay-400: #C8966F; --clay-500: #B5654A; /* signature terracotta, hero accent */ --clay-600: #9A4F38; --clay-700: #7A3D2A; /* Ochre — secondary warm accent (sunset/honey) */ --ochre-400: #D4A86A; --ochre-500: #C28A3C; --ochre-600: #A66F25; /* Moss — botanical/grounding accent */ --moss-300: #A9B498; --moss-500: #6B7858; --moss-700: #4A5340; /* Stone — cool-warm neutral midtones */ --stone-300: #B6AE9F; --stone-500: #7C7468; --stone-700: #4D473F; /* Ink — text + deep brand neutral */ --ink-700: #2E2820; --ink-800: #221E18; --ink-900: #1C1814; /* primary text */ /* Utility */ --pure-white: #FFFFFF; --shadow-warm: 28 24 20; /* rgb triplet of ink-900 for shadow alpha */ /* ============================================================ 2. SEMANTIC COLOR — use these in components. ============================================================ */ /* Surfaces */ --bg: var(--bone-50); /* default page */ --bg-soft: var(--bone-100); /* alt section */ --bg-warm: var(--bone-200); /* card / module */ --bg-inverse: var(--ink-900); /* dark sections */ /* Foreground */ --fg: var(--ink-900); /* body text */ --fg-muted: var(--stone-700); /* secondary text */ --fg-subtle: var(--stone-500); /* tertiary / captions */ --fg-on-dark: var(--bone-100); /* text on inverse */ --fg-on-dark-muted: #B6AE9F; /* Accent */ --accent: var(--clay-500); /* terracotta */ --accent-hover: var(--clay-600); --accent-soft: var(--clay-300); --accent-ink: var(--clay-700); /* dark terracotta for text on light */ /* Secondary accents */ --accent-ochre: var(--ochre-500); --accent-moss: var(--moss-500); /* Lines & dividers */ --rule: rgba(28, 24, 20, 0.12); --rule-strong: rgba(28, 24, 20, 0.32); --rule-on-dark: rgba(244, 238, 228, 0.18); /* States */ --focus-ring: var(--clay-500); /* ============================================================ 3. TYPE PRIMITIVES ============================================================ */ --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", "Iowan Old Style", Georgia, serif; --font-sans: "Manrope", "Söhne", "Inter Tight", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-base: 0; --tracking-wide: 0.08em; --tracking-eyebrow: 0.22em; /* ============================================================ 4. SEMANTIC TYPOGRAPHY Use these directly on h1/h2/p (see element styles below) or reference as: font: var(--type-h2); ============================================================ */ /* Display & headings — serif */ --type-display: 300 clamp(56px, 8.5vw, 132px)/var(--leading-tight) var(--font-display); --type-h1: 300 clamp(44px, 5.6vw, 88px)/var(--leading-tight) var(--font-display); --type-h2: 400 clamp(32px, 3.6vw, 56px)/var(--leading-snug) var(--font-display); --type-h3: 500 clamp(22px, 1.8vw, 28px)/1.25 var(--font-display); /* Body & UI — sans */ --type-lead: 300 clamp(18px, 1.35vw, 22px)/var(--leading-relaxed) var(--font-sans); --type-body: 400 16px/var(--leading-relaxed) var(--font-sans); --type-small: 400 14px/var(--leading-normal) var(--font-sans); --type-caption: 500 12px/1.4 var(--font-sans); /* Editorial accents */ --type-eyebrow: 500 12px/1 var(--font-sans); /* + uppercase + tracking */ --type-quote: 300 italic clamp(28px, 3vw, 44px)/1.3 var(--font-display); /* ============================================================ 5. SPACING — 8px base scale with editorial generosity ============================================================ */ --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; --space-11: 160px; --space-12: 200px; /* Layout */ --gutter: clamp(24px, 4vw, 64px); --max-w-prose: 62ch; --max-w-content: 1280px; --max-w-wide: 1480px; /* ============================================================ 6. RADII — minimal & restrained ============================================================ */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; --r-arch: 50% 50% 8px 8px / 65% 65% 8px 8px; /* organic arch top */ /* ============================================================ 7. SHADOWS — soft, warm, never harsh ============================================================ */ --shadow-1: 0 1px 2px rgba(var(--shadow-warm) / 0.06), 0 2px 6px rgba(var(--shadow-warm) / 0.05); --shadow-2: 0 4px 12px rgba(var(--shadow-warm) / 0.07), 0 12px 32px rgba(var(--shadow-warm) / 0.06); --shadow-3: 0 12px 40px rgba(var(--shadow-warm) / 0.10), 0 24px 80px rgba(var(--shadow-warm) / 0.08); --shadow-inset: inset 0 0 0 1px rgba(28, 24, 20, 0.06); /* ============================================================ 8. MOTION — long, eased, never bouncy ============================================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 600ms; --dur-4: 1200ms; } /* ============================================================ ELEMENT DEFAULTS — applies the semantic type to bare HTML. ============================================================ */ html, body { background: var(--bg); color: var(--fg); font: var(--type-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0; } h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); margin: 0; } h3 { font: var(--type-h3); margin: 0; } p { margin: 0; max-width: var(--max-w-prose); } small { font: var(--type-small); color: var(--fg-muted); } a { color: inherit; text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); } a:hover { color: var(--accent-ink); } /* Editorial primitives — utility classes used across the system. */ .eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-muted); } .lead { font: var(--type-lead); color: var(--fg-muted); } .quote { font: var(--type-quote); color: var(--fg); } .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* Selection — warm clay highlight */ ::selection { background: var(--clay-300); color: var(--ink-900); }