/* * hiebel.lab — design tokens * * Drop this stylesheet into any new project and you'll get the warm-dark * palette, Geist + Geist Mono, and the canonical surfaces wired up. * * * * For tooling that wants the variables instead of the stylesheet, the * `:root` block below is the source of truth. Mirror to other formats * (JS object, SCSS, iOS) only when a second platform actually needs them. */ :root { /* ── Surfaces ─────────────────────────────────── */ --bg: #15140f; --surface: #1c1b15; --surface2: #23211a; --line: #2e2b21; /* ── Type colors ──────────────────────────────── */ --text: #efeae0; --muted: #8a8474; --dim: #5d5849; /* ── Accent ───────────────────────────────────── */ --accent: #e9b15a; --accent-2: #b88838; /* ── Status ───────────────────────────────────── */ --live: #5bc787; --degraded: #e9b15a; --down: #e07560; --unknown: #6e6a5c; /* ── Type ─────────────────────────────────────── */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; /* ── Radius + motion ──────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px; --motion: 120ms ease; } /* Google Fonts import. Inline so brand.css is a single drop-in. */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"); /* Optional baseline reset — opt in by adding class="hl-base" to . */ body.hl-base { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.hl-base::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 600px at 20% -10%, rgba(233,177,90,0.06), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(233,177,90,0.03), transparent 60%); }