/* ============================================================ Shawn Smith — Design Tokens Drop this in as the first stylesheet in your . ============================================================ */ :root { /* ----- Color: warm Japandi palette ----- */ --paper: #F2EDE3; --paper-2: #EAE3D5; --paper-3: #DED4C0; --ink: #1F1B16; --ink-soft: #3B342C; --muted: #6F6557; --hair: #BBAF99; --hair-soft: #D5CBB6; --sage: #7A8478; --clay: #B8895E; --rust: #B5552B; --cream: #FBF7EE; /* Dark-section tokens (use sparingly) */ --dark-bg: #1A1612; --dark-text: #F5EFE2; --dark-text-soft: #D8CFB8; --dark-muted: #9C907A; /* ----- Type stacks ----- */ --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ----- Type scale (fluid) ----- */ --fs-display: clamp(56px, 8vw, 108px); --fs-h1: clamp(40px, 5vw, 80px); --fs-h2: clamp(32px, 4vw, 56px); --fs-h3: clamp(24px, 2.5vw, 36px); --fs-lead: 22px; --fs-body: 18px; --fs-small: 16px; --fs-caption: 13px; --fs-eyebrow: 11px; /* ----- Spacing ----- */ --pad-page-x: clamp(24px, 6vw, 96px); --pad-page-y: clamp(48px, 8vw, 120px); --gutter: 32px; --section-gap: clamp(64px, 10vw, 120px); /* ----- Layout widths ----- */ --w-reading: 720px; /* prose column */ --w-wide: 1200px; /* plates, diptychs */ --w-full: 1440px; /* outer max */ /* ----- Hairlines ----- */ --hair-w: 1px; /* ----- Photo treatment ----- */ --photo-frame: 14px; --photo-gutter: 44px; /* caption strip below photo */ --photo-wash: saturate(.78) sepia(.10) contrast(.97) brightness(.99); } /* ----- Base ----- */ html, body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--fs-body); line-height: 1.55; margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { text-wrap: pretty; } /* ----- Selection (warm rust highlight) ----- */ ::selection { background: var(--rust); color: var(--cream); }