/* Marrow Journal — Colors & Type * Single source of truth for tokens. Imported by every preview card and UI kit. */ /* ----- Font faces (Google Fonts) ----- */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Inter+Tight:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ============================================================ * COLOR — Paper & Ink * Warm off-whites, deep warm ink, one ember accent. * ============================================================ */ /* Neutrals (warm) */ --cream: #F7F2E8; /* page background, light mode */ --stone: #EDE5D4; /* secondary surface */ --stone-2: #E3D9C3; /* hover/press on stone */ --paper: #FBF7EE; /* elevated surface, composer */ --ink: #1C1814; /* primary text */ --ink-2: #3B332A; /* secondary text */ --ink-3: #6F6558; /* tertiary text, metadata */ --ink-4: #A59B8A; /* quaternary, placeholders */ --hairline: rgba(28, 24, 20, 0.08); /* Dark mode — deep ink blue, not black */ --night: #1A1C22; /* page background, dark */ --night-2: #22252C; /* secondary surface, dark */ --night-3: #2C2F37; /* hover, dark */ --night-paper: #262830; /* elevated, dark */ --bone: #F0EADB; /* primary text, dark */ --bone-2: #CFC6B4; /* secondary text, dark */ --bone-3: #8A8374; /* tertiary, dark */ --hairline-dk: rgba(240, 234, 219, 0.10); /* Accent — ember. Used sparingly: active cursor, follow-up bracket. */ --ember: #B4532A; /* warm sienna */ --ember-soft: #D18757; /* hover on ember */ --ember-wash: #F1DCC8; /* tint background for selection */ /* Semantic — quieter than typical */ --moss: #5A6E3A; /* save confirmed */ --rust: #9A3A28; /* error, destructive */ --dust: #8A7A54; /* warning */ /* ============================================================ * TYPE * Serif for reflection. Grotesk for chrome. Mono for raw .md. * ============================================================ */ --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Georgia', serif; --font-sans: 'Inter Tight', -apple-system, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace; /* Type scale — 1.25 ratio, grounded at 16px base */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; /* Body — the most important size */ --body-serif-size: 18px; --body-serif-lh: 1.55; --body-serif-tracking: 0; --ui-lh: 1.4; /* ============================================================ * SPACING — 4px baseline * ============================================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* ============================================================ * RADII * ============================================================ */ --r-sm: 6px; --r-md: 8px; /* inputs, buttons */ --r-lg: 12px; /* cards */ --r-xl: 20px; /* sheets, modals */ --r-pill: 999px; /* ============================================================ * SHADOW — almost invisible. One step only. * ============================================================ */ --shadow-quiet: 0 1px 2px rgba(20, 16, 12, 0.04), 0 4px 12px rgba(20, 16, 12, 0.04); --shadow-sheet: 0 2px 6px rgba(20, 16, 12, 0.06), 0 16px 40px rgba(20, 16, 12, 0.08); /* ============================================================ * MOTION * ============================================================ */ --ease-calm: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 180ms; --dur-med: 280ms; --dur-slow: 520ms; /* ============================================================ * SEMANTIC TOKENS — what UI should bind to * ============================================================ */ --bg: var(--cream); --surface: var(--paper); --surface-2: var(--stone); --surface-3: var(--stone-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-4: var(--ink-4); --line: var(--hairline); --accent: var(--ember); --accent-soft: var(--ember-soft); --accent-wash: var(--ember-wash); --success: var(--moss); --danger: var(--rust); --warn: var(--dust); } /* Dark mode: opt in with [data-theme="dark"] on or */ [data-theme="dark"] { --bg: var(--night); --surface: var(--night-paper); --surface-2: var(--night-2); --surface-3: var(--night-3); --fg: var(--bone); --fg-2: var(--bone-2); --fg-3: var(--bone-3); --fg-4: #6C6554; --line: var(--hairline-dk); --accent: #C86B3E; --accent-soft: #D88A5F; --accent-wash: rgba(200, 107, 62, 0.14); } /* ============================================================ * SEMANTIC ELEMENT STYLES * Use .prose on a wrapper to get reading-ready typography. * ============================================================ */ .prose { font-family: var(--font-serif); font-size: var(--body-serif-size); line-height: var(--body-serif-lh); color: var(--fg); } .prose p + p { margin-top: 1em; } .ui { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--ui-lh); color: var(--fg); } .meta { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-3); letter-spacing: 0.01em; } .mono { font-family: var(--font-mono); font-size: var(--text-sm); } .h-display { font-family: var(--font-serif); font-size: var(--text-4xl); line-height: 1.08; font-weight: 400; letter-spacing: -0.01em; color: var(--fg); } .h1 { font-family: var(--font-serif); font-size: var(--text-3xl); line-height: 1.15; font-weight: 400; letter-spacing: -0.005em; color: var(--fg); } .h2 { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.2; font-weight: 400; color: var(--fg); } .h3 { font-family: var(--font-sans); font-size: var(--text-lg); line-height: 1.3; font-weight: 500; color: var(--fg); letter-spacing: 0; } .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } .quote-word { font-style: italic; font-family: var(--font-serif); color: var(--fg); } /* Reset nudges */ html, body { background: var(--bg); color: var(--fg); margin: 0; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--ui-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; }