/* ============================================================ HONEYBADGER — THEME TOKENS (framework-agnostic) Six palettes exposed as CSS custom properties. Drop this into any web codebase and style with var(--hb-*). Switch palette by setting [data-hb-theme] on : document.documentElement.dataset.hbTheme = 'warm-white'; Defaults: no attribute => Deep Teal Ink (dark default). Light default is 'warm-white'. ============================================================ */ :root, :root[data-hb-theme="teal-ink"] { /* DARK DEFAULT */ --hb-bg: oklch(0.17 0.038 220); --hb-bg-2: oklch(0.20 0.038 220); --hb-surface: oklch(0.22 0.038 220); --hb-surface-2: oklch(0.14 0.035 222); --hb-border: oklch(0.32 0.03 220); --hb-border-strong: oklch(0.38 0.03 220); --hb-text: oklch(0.97 0.01 210); --hb-text-dim: oklch(0.70 0.03 210); --hb-text-faint: oklch(0.50 0.03 214); --hb-accent: oklch(0.64 0.18 42); --hb-accent-ink: #ffffff; --hb-teal: oklch(0.74 0.13 195); --hb-spark: oklch(0.87 0.22 128); --hb-grad: linear-gradient(110deg, oklch(0.70 0.18 45), oklch(0.80 0.13 190)); --hb-glow-orange: oklch(0.64 0.18 42 / 0.14); --hb-glow-teal: oklch(0.62 0.13 200 / 0.16); --hb-shadow: oklch(0.08 0.04 232 / 0.6); } :root[data-hb-theme="near-black"] { /* DARK */ --hb-bg: oklch(0.09 0.015 42); --hb-bg-2: oklch(0.11 0.012 42); --hb-surface: oklch(0.12 0.012 42); --hb-surface-2: oklch(0.08 0.014 42); --hb-border: oklch(0.20 0.01 42); --hb-border-strong: oklch(0.26 0.01 42); --hb-text: oklch(0.97 0.008 42); --hb-text-dim: oklch(0.60 0.01 42); --hb-text-faint: oklch(0.40 0.01 42); --hb-accent: oklch(0.62 0.18 42); --hb-accent-ink: #ffffff; --hb-teal: oklch(0.62 0.15 195); --hb-spark: oklch(0.87 0.22 128); --hb-grad: linear-gradient(110deg, oklch(0.66 0.18 42), oklch(0.66 0.15 195)); --hb-glow-orange: oklch(0.62 0.18 42 / 0.12); --hb-glow-teal: oklch(0.62 0.15 195 / 0.10); --hb-shadow: oklch(0 0 0 / 0.5); } :root[data-hb-theme="espresso"] { /* DARK (warm) */ --hb-bg: oklch(0.16 0.022 50); --hb-bg-2: oklch(0.19 0.022 50); --hb-surface: oklch(0.21 0.022 50); --hb-surface-2: oklch(0.13 0.02 50); --hb-border: oklch(0.30 0.02 50); --hb-border-strong: oklch(0.36 0.02 50); --hb-text: oklch(0.96 0.012 70); --hb-text-dim: oklch(0.66 0.02 55); --hb-text-faint: oklch(0.46 0.02 52); --hb-accent: oklch(0.64 0.18 45); --hb-accent-ink: #ffffff; --hb-teal: oklch(0.66 0.15 195); --hb-spark: oklch(0.87 0.22 128); --hb-grad: linear-gradient(110deg, oklch(0.68 0.18 45), oklch(0.66 0.15 195)); --hb-glow-orange: oklch(0.64 0.18 45 / 0.14); --hb-glow-teal: oklch(0.66 0.15 195 / 0.10); --hb-shadow: oklch(0 0 0 / 0.5); } :root[data-hb-theme="warm-white"] { /* LIGHT DEFAULT */ --hb-bg: oklch(0.97 0.008 80); --hb-bg-2: oklch(0.94 0.01 80); --hb-surface: #ffffff; --hb-surface-2: oklch(0.95 0.01 80); --hb-border: oklch(0.88 0.01 80); --hb-border-strong: oklch(0.82 0.012 80); --hb-text: oklch(0.20 0.02 50); --hb-text-dim: oklch(0.46 0.02 55); --hb-text-faint: oklch(0.60 0.015 60); --hb-accent: oklch(0.58 0.18 42); --hb-accent-ink: #ffffff; --hb-teal: oklch(0.52 0.14 195); --hb-spark: oklch(0.72 0.20 128); --hb-grad: linear-gradient(110deg, oklch(0.58 0.18 42), oklch(0.52 0.14 195)); --hb-glow-orange: oklch(0.62 0.18 42 / 0.10); --hb-glow-teal: oklch(0.55 0.14 195 / 0.08); --hb-shadow: oklch(0.50 0.05 60 / 0.12); } :root[data-hb-theme="sand"] { /* LIGHT (warm) */ --hb-bg: oklch(0.92 0.024 75); --hb-bg-2: oklch(0.89 0.026 73); --hb-surface: oklch(0.97 0.015 78); --hb-surface-2: oklch(0.94 0.02 76); --hb-border: oklch(0.85 0.022 70); --hb-border-strong: oklch(0.79 0.024 68); --hb-text: oklch(0.26 0.03 50); --hb-text-dim: oklch(0.45 0.03 55); --hb-text-faint: oklch(0.58 0.025 58); --hb-accent: oklch(0.56 0.18 40); --hb-accent-ink: #ffffff; --hb-teal: oklch(0.50 0.14 195); --hb-spark: oklch(0.70 0.20 128); --hb-grad: linear-gradient(110deg, oklch(0.56 0.18 40), oklch(0.50 0.14 195)); --hb-glow-orange: oklch(0.60 0.18 42 / 0.10); --hb-glow-teal: oklch(0.52 0.14 195 / 0.08); --hb-shadow: oklch(0.45 0.06 60 / 0.12); } :root[data-hb-theme="slate"] { /* LIGHT (cool) */ --hb-bg: oklch(0.94 0.008 240); --hb-bg-2: oklch(0.91 0.01 240); --hb-surface: #ffffff; --hb-surface-2: oklch(0.96 0.008 240); --hb-border: oklch(0.87 0.01 240); --hb-border-strong: oklch(0.81 0.012 240); --hb-text: oklch(0.22 0.02 250); --hb-text-dim: oklch(0.46 0.02 250); --hb-text-faint: oklch(0.60 0.015 245); --hb-accent: oklch(0.58 0.18 42); --hb-accent-ink: #ffffff; --hb-teal: oklch(0.50 0.14 200); --hb-spark: oklch(0.70 0.20 128); --hb-grad: linear-gradient(110deg, oklch(0.58 0.18 42), oklch(0.50 0.14 200)); --hb-glow-orange: oklch(0.60 0.18 42 / 0.09); --hb-glow-teal: oklch(0.52 0.14 200 / 0.08); --hb-shadow: oklch(0.40 0.04 250 / 0.12); } /* Base wiring — optional, but recommended */ html { background: var(--hb-bg); } body { background: var(--hb-bg); color: var(--hb-text); transition: background 0.35s ease, color 0.35s ease; }