/* ============================================================ Open Property Tax · Design tokens A free data service offered by PropertyTax.io ------------------------------------------------------------ Drop this into the or your root stylesheet and use var(--brand), var(--ink), etc. throughout your UI. ============================================================ */ :root { /* ---------- Ink (text + structure) ---------- */ --opt-ink: #0f1b1f; /* near-black with a hint of green — primary text, borders */ --opt-ink-2: #4a5a60; /* secondary text, captions */ --opt-ink-3: #8a9598; /* tertiary text, disabled */ /* ---------- Paper (surfaces) ---------- */ --opt-paper: #fbfaf6; /* primary surface — warm off-white */ --opt-paper-2: #efece4; /* secondary surface — subtle depth */ /* ---------- Brand ---------- */ --opt-brand: #0a5c4a; /* deep confident green — primary CTA, links, highlights */ --opt-brand-2: #e8f1ec; /* brand-tinted surface — soft callouts */ /* ---------- Semantic ---------- */ --opt-accent: #d7553a; /* warm clay — attention, never primary */ --opt-highlight: #f5d76e; /* soft gold — pills, picked state */ --opt-good: #0a5c4a; /* success = brand */ --opt-rule: #0f1b1f1f; /* hairline divider (12% ink) */ } /* ============================================================ Typography ------------------------------------------------------------ Import these Google Fonts (or self-host): https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Instrument+Sans:wght@400..700&family=IBM+Plex+Mono:wght@400;500;700&display=swap ============================================================ */ :root { --opt-font-display: 'Fraunces', Georgia, serif; /* headings, big numbers */ --opt-font-body: 'Instrument Sans', system-ui, sans-serif; /* UI, body copy */ --opt-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* data, labels, kicker */ }