/* ============================================================================= Theme variables (§2.4). One attribute — data-theme on — switches the whole palette. All colors are OKLCH. Strategy: restrained — true-neutral surfaces tinted faintly toward the brand hue (NOT a cream bg) + one teal accent. Body text is kept at the ink end of the ramp so contrast clears 4.5:1. ========================================================================== */ :root { /* spacing rhythm */ --hh-space-1: 0.25rem; --hh-space-2: 0.5rem; --hh-space-3: 0.75rem; --hh-space-4: 1rem; --hh-space-5: 1.5rem; --hh-space-6: 2rem; --hh-space-8: 3rem; --hh-space-12: 5rem; --hh-radius-sm: 6px; --hh-radius: 10px; --hh-radius-lg: 16px; --hh-radius-pill: 999px; /* type */ --hh-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hh-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* semantic z-index scale — never arbitrary 999s */ --hh-z-dropdown: 1000; --hh-z-sticky: 1100; --hh-z-modal-backdrop: 1200; --hh-z-modal: 1300; --hh-z-toast: 1400; --hh-z-tooltip: 1500; /* motion — ease-out, exponential; no bounce */ --hh-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --hh-dur-fast: 0.14s; --hh-dur: 0.22s; /* ===== THE BRAND SWAP POINT ===================================== Rebrand any project built on this base by changing these two values. The entire accent ramp (buttons, links, focus rings, badges, chips, active tab) — in both light and dark — derives from this hue + chroma. Default: teal (h 205). Examples: indigo h 270 · violet h 290 · green h 150 · blue h 250 ================================================================ */ --hh-accent-h: 205; --hh-accent-c: 0.115; } /* ---- Light (default) ---- */ :root, [data-theme="light"] { color-scheme: light; --hh-bg: oklch(0.985 0.004 210); --hh-surface: oklch(1 0 0); --hh-surface-2: oklch(0.965 0.005 210); --hh-surface-3: oklch(0.94 0.006 210); --hh-border: oklch(0.9 0.007 215); --hh-border-strong: oklch(0.82 0.01 215); --hh-ink: oklch(0.24 0.02 235); /* primary text */ --hh-ink-soft: oklch(0.43 0.018 235); /* secondary text — ~7:1 on bg */ --hh-muted: oklch(0.47 0.014 235); /* tertiary/placeholder — ≥4.5:1 on bg */ /* accent ramp — all derived from the seed above */ --hh-accent: oklch(0.62 var(--hh-accent-c) var(--hh-accent-h)); --hh-accent-strong: oklch(0.50 var(--hh-accent-c) var(--hh-accent-h)); /* bg w/ white text ≈4.6:1 */ --hh-accent-soft: oklch(0.95 0.03 var(--hh-accent-h)); --hh-accent-ink: oklch(0.99 0 0); --hh-accent-line: var(--hh-accent); --hh-danger: oklch(0.52 0.18 27); --hh-danger-soft: oklch(0.95 0.04 27); --hh-success: oklch(0.52 0.13 150); --hh-warning: oklch(0.7 0.13 80); --hh-shadow-sm: 0 1px 2px oklch(0.2 0.02 235 / 0.06); --hh-shadow: 0 4px 14px oklch(0.2 0.02 235 / 0.08); --hh-shadow-lg: 0 18px 48px oklch(0.2 0.02 235 / 0.18); --hh-overlay: oklch(0.2 0.02 235 / 0.42); } /* ---- Dark ---- */ [data-theme="dark"] { color-scheme: dark; --hh-bg: oklch(0.17 0.012 235); --hh-surface: oklch(0.215 0.014 235); --hh-surface-2: oklch(0.255 0.015 235); --hh-surface-3: oklch(0.3 0.016 235); --hh-border: oklch(0.33 0.015 235); --hh-border-strong: oklch(0.42 0.016 235); --hh-ink: oklch(0.96 0.006 220); --hh-ink-soft: oklch(0.8 0.012 220); /* ~8:1 on dark bg */ --hh-muted: oklch(0.64 0.013 220); /* accent ramp — same seed, dark overrides the L values only */ --hh-accent: oklch(0.74 var(--hh-accent-c) var(--hh-accent-h)); --hh-accent-strong: oklch(0.80 var(--hh-accent-c) var(--hh-accent-h)); /* dark ink on bright accent */ --hh-accent-soft: oklch(0.32 0.06 var(--hh-accent-h)); --hh-accent-ink: oklch(0.16 0.02 235); --hh-accent-line: var(--hh-accent); --hh-danger: oklch(0.68 0.17 27); --hh-danger-soft: oklch(0.3 0.07 27); --hh-success: oklch(0.72 0.13 152); --hh-warning: oklch(0.8 0.13 82); --hh-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --hh-shadow: 0 6px 18px oklch(0 0 0 / 0.45); --hh-shadow-lg: 0 22px 55px oklch(0 0 0 / 0.6); --hh-overlay: oklch(0 0 0 / 0.6); }