/* 99folks · Design Tokens
* Use these CSS variables on the :root of every page.
*/
:root {
/* ---- Color ---- */
--color-paper: #fbf6ec; /* Linen Paper · default background, 60% of surface */
--color-ink: #1a1a1a; /* Hymnal Ink · body text, primary buttons, 25% */
--color-tan: #c08b5c; /* Shepherd Tan · accent, lines, highlights, 10% */
--color-walnut: #5a3a22; /* Walnut · secondary text, support, 5% */
/* ---- Tints (use sparingly) ---- */
--color-paper-50: #fbf6ec;
--color-linen-100: #f4ede0;
--color-linen-200: #ece2cf;
--color-linen-400: #dccaa8;
--color-tan-600: #c08b5c;
--color-walnut-700:#8a5a35;
--color-walnut-800:#5a3a22;
--color-ink-900: #1a1a1a;
/* ---- Semantic ---- */
--color-text: var(--color-ink);
--color-text-muted: #8a7a5e;
--color-text-soft: var(--color-walnut);
--color-bg: var(--color-paper);
--color-bg-alt: var(--color-linen-100);
--color-rule: #d8ccb3;
--color-accent: var(--color-tan);
/* ---- Type ---- */
--font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-sans: "Manrope", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
--fs-display: clamp(56px, 8vw, 96px); /* hero, album titles */
--fs-section: clamp(36px, 5vw, 56px); /* section headers */
--fs-pullquote: 28px;
--fs-body-lg: 18px;
--fs-body: 15px;
--fs-ui: 13px;
--fs-label: 11px; /* mono, uppercase, +0.15em tracking */
--fs-fine: 10px;
--lh-tight: 0.95;
--lh-body: 1.55;
/* ---- Spacing & rhythm ---- */
--space-section: clamp(48px, 6vw, 80px);
--space-block: 48px;
--space-row: 24px;
--max-w: 1280px;
--max-w-prose: 62ch;
--radius-sm: 2px;
--radius-md: 6px;
/* ---- Borders ---- */
--border-thin: 1px solid var(--color-rule);
}
/* ---- Reset-ish base ---- */
html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-body); line-height: var(--lh-body); }
/* ---- Type classes the site can use ---- */
.h-display { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.h-section { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--fs-section); line-height: 1; letter-spacing: -0.01em; }
.lede { font-family: var(--font-serif); font-size: 21px; line-height: 1.45; max-width: var(--max-w-prose); }
.label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); }
.pill { display:inline-block; padding:4px 10px; border:var(--border-thin); border-radius:99px; font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--color-walnut); }
/* ---- Google Fonts import (drop at top of ) ----
*/