/* ============================================================ PlumiBot — "Plume" design tokens The single source of truth for the marketing site's look: a quiet paper-white early-Macintosh canvas with ONE warm terracotta accent and a cast of pixel birds. Neutrals cover ~90% of every screen; terracotta is a single pop per section (primary CTA, active nav link, key highlight, a bird's beak/feet). Never set body copy in a pixel font. ============================================================ */ :root { /* — Surfaces (light) — */ --paper: #F8F6F1; /* the page itself */ --surface: #FFFFFF; /* cards, windows, raised things */ --sunk: #EFEBE2; /* recessed wells, icon mats, code chips */ /* — Ink (text) — */ --ink: #1A1813; /* primary text + pixel outlines */ --ink-2: #55514A; /* body copy */ --ink-3: #8A857A; /* muted labels, captions */ /* — Lines — */ --line: #E2DDD2; /* hairline dividers */ --border: #CFC8B8; /* 1px component borders */ /* — The one accent: terracotta — */ --accent: #E0915E; /* FILLS only (buttons, active states) */ --accent-text: #A85731; /* accent TEXT + links (AA on paper) */ --on-accent: #2A1A10; /* ink placed on a terracotta fill */ /* — States. NOT brand colours — never decorate with these. — */ --success: #8FAA8B; /* sage */ --warn: #C98A2E; /* amber: quota 80%+ */ --danger: #B4443C; /* muted brick: plume has no true red */ --on-danger: #FFF6F0; /* — Shape & elevation: sharp UI, rounded windows — */ --bw: 1px; /* border width */ --r-sm: 2px; /* buttons, cards, inputs */ --r-win: 9px; /* Mac window chrome — the ONE rounded thing */ --shadow-sm: 2px 2px 0 rgba(26,24,19,0.12); /* hard offset, no blur */ } /* — Dark "Phosphor" mode. Accent stays terracotta in both modes. Set data-theme="phosphor" on ; "auto" resolves it from prefers-color-scheme before first paint. — */ [data-theme="phosphor"] { --paper: #141210; --surface: #1E1B16; --sunk: #0F0D0B; --ink: #F2ECDD; --ink-2: #C7BFAE; --ink-3: #8E8677; --line: #2A2620; --border: #3A352C; --accent: #E8A06F; --accent-text: #E8A06F; --on-accent: #1A1006; /* states lift off their light-mode hues to clear AA on #141210 */ --success: #9DB79A; --warn: #E0A94E; --danger: #E2726A; --on-danger: #2A0E0B; color-scheme: dark; } /* ============================================================ Type — pixel display, clean body (all on Google Fonts): Pixelify Sans — headings / display Silkscreen — micro-labels, eyebrows, the logo Karla — body copy JetBrains Mono — code, commands, pixel numerals Scale: H1 44–52 / H2 28–32 / H3 18–20 / eyebrow 11 (tracked caps) / lede 19 / body 16·1.6 / small 13. ============================================================ */ :root { --font-display: 'Pixelify Sans', system-ui, sans-serif; --font-label: 'Silkscreen', monospace; --font-body: 'Karla', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; }