/* ========================================================================== Tillman Studio — Design System tokens v1.0 · Coffee palette default · swap data-theme on to change ========================================================================== */ /* TKAB Design System — standard fonts: Playfair Display (display) · Montserrat (body) · SF Pro (system/UI fallback) */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---- Palette: Coffee (default) ---- */ --ts-espresso: #2b1a0f; --ts-ink: #1e1410; --ts-roast: #5a3a22; --ts-muted: #8a6f55; --ts-latte: #b8926b; --ts-crema: #e8d7b9; --ts-paper: #f4ece0; --ts-milk: #faf6ef; --ts-foam: #fff8ea; --ts-orange: #d96e1a; --ts-orange-2: #a85520; --ts-success: #3d6b4a; --ts-danger: #a83a1a; /* ---- Semantic (maps to palette) ---- */ --ts-bg: var(--ts-paper); --ts-surface: var(--ts-milk); --ts-surface-2: var(--ts-crema); --ts-text: var(--ts-espresso); --ts-text-muted: var(--ts-muted); --ts-text-soft: var(--ts-roast); --ts-border: rgba(43, 26, 15, 0.08); --ts-border-2: rgba(43, 26, 15, 0.16); --ts-accent: var(--ts-orange); --ts-accent-2: var(--ts-orange-2); --ts-on-accent: #ffffff; /* ---- Type ---- */ --ts-font-display: 'Playfair Display', 'SF Pro Display', -apple-system, Georgia, serif; --ts-font-body: 'Montserrat', 'SF Pro Text', -apple-system, system-ui, sans-serif; --ts-font-system: -apple-system, 'SF Pro Text', BlinkMacSystemFont, system-ui, sans-serif; --ts-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (rem, 16px base) */ --ts-text-xs: 0.75rem; /* 12 */ --ts-text-sm: 0.875rem; /* 14 */ --ts-text-base: 1rem; /* 16 */ --ts-text-lg: 1.125rem; /* 18 */ --ts-text-xl: 1.375rem; /* 22 */ --ts-text-2xl: 1.75rem; /* 28 */ --ts-text-3xl: 2.25rem; /* 36 */ --ts-text-4xl: 3rem; /* 48 */ --ts-text-5xl: 4rem; /* 64 */ --ts-text-6xl: 5.5rem; /* 88 */ /* ---- Spacing (4px base, 8-point grid) ---- */ --ts-sp-1: 4px; --ts-sp-2: 8px; --ts-sp-3: 12px; --ts-sp-4: 16px; --ts-sp-5: 24px; --ts-sp-6: 32px; --ts-sp-7: 48px; --ts-sp-8: 64px; --ts-sp-9: 96px; --ts-sp-10: 128px; /* ---- Radii ---- */ --ts-r-xs: 4px; --ts-r-sm: 6px; --ts-r-md: 8px; --ts-r-lg: 12px; --ts-r-xl: 16px; --ts-r-2xl: 24px; --ts-r-pill: 999px; /* ---- Shadow (depth ladder) ---- */ --ts-sh-1: 0 1px 2px rgba(43, 26, 15, 0.06); --ts-sh-2: 0 2px 6px rgba(43, 26, 15, 0.08), 0 1px 2px rgba(43, 26, 15, 0.04); --ts-sh-3: 0 8px 24px rgba(43, 26, 15, 0.10), 0 2px 6px rgba(43, 26, 15, 0.05); --ts-sh-4: 0 16px 48px rgba(43, 26, 15, 0.14), 0 4px 12px rgba(43, 26, 15, 0.06); --ts-sh-accent: 0 8px 24px rgba(217, 110, 26, 0.25); /* ---- Motion ---- */ --ts-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ts-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ts-dur-fast: 0.15s; --ts-dur: 0.25s; --ts-dur-slow: 0.45s; /* ---- Layout ---- */ --ts-container: 1200px; --ts-container-narrow: 860px; } /* ---- Dark theme (coffee-dark) ---- */ [data-theme="dark"] { --ts-bg: var(--ts-ink); --ts-surface: #261b13; --ts-surface-2: #3a271a; --ts-text: var(--ts-paper); --ts-text-muted: var(--ts-latte); --ts-text-soft: var(--ts-crema); --ts-border: rgba(255, 255, 255, 0.08); --ts-border-2: rgba(255, 255, 255, 0.16); } /* ---- Palette 02: Forest & linen ---- */ [data-palette="forest"] { --ts-espresso: #0f1a15; --ts-ink: #1a0f0a; --ts-roast: #1f3a2a; --ts-muted: #4a5a52; --ts-latte: #8aa088; --ts-crema: #dcd5c2; --ts-paper: #e8e3d3; --ts-milk: #f6f3ea; --ts-foam: #fcfaf3; --ts-orange: #c9812a; --ts-orange-2: #8c4a18; } /* ---- Palette 03: Steel & ember ---- */ [data-palette="steel"] { --ts-espresso: #0d1620; --ts-ink: #050a10; --ts-roast: #1f2b3a; --ts-muted: #506272; --ts-latte: #90a2b5; --ts-crema: #d5dce4; --ts-paper: #eaeef3; --ts-milk: #f4f6f9; --ts-foam: #ffffff; --ts-orange: #ea6a2a; --ts-orange-2: #b85224; } /* ========================================================================== Base reset + typography ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--ts-bg); color: var(--ts-text); font-family: var(--ts-font-body); font-size: var(--ts-text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--ts-font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } h1 { font-size: var(--ts-text-5xl); } h2 { font-size: var(--ts-text-3xl); } h3 { font-size: var(--ts-text-2xl); } h4 { font-size: var(--ts-text-xl); } p { margin: 0; text-wrap: pretty; } .ts-eyebrow { font-family: var(--ts-font-body); font-size: var(--ts-text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-accent); } .ts-mono { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); }