/* site.css — component classes on top of Tailwind utilities. Brand colors come from theme.css (generated from branding.colors in the site config): --color-primary, --color-dark, --color-secondary, --color-surface, --color-text. */ /* Theme tokens. Light is the default; [data-theme="dark"] flips the neutrals while brand colors (primary/dark) stay put. The attribute is set pre-paint by the inline script in (system preference or the editor's stored choice). */ :root { --zk-hover: rgba(0, 0, 0, 0.045); --zk-border-soft: rgba(0, 0, 0, 0.07); --zk-border: rgba(0, 0, 0, 0.1); --zk-border-strong: rgba(0, 0, 0, 0.17); --zk-chrome: #101725; color-scheme: light; } :root[data-theme="dark"] { --color-surface: #0e1319; --color-text: #e7eaef; --color-secondary: #96a0ae; --zk-hover: rgba(255, 255, 255, 0.06); --zk-border-soft: rgba(255, 255, 255, 0.07); --zk-border: rgba(255, 255, 255, 0.11); --zk-border-strong: rgba(255, 255, 255, 0.18); --zk-chrome: #1a2230; color-scheme: dark; } /* ── Buttons ────────────────────────────────────────────────────────── Structure from the Pines button component (inline-flex centring, tracked text, ring-style focus); colour from this site's own tokens rather than Pines' neutral-950, so buttons stay on-brand. Two things this fixes over the old single rule: · display was inline-block, so a button containing an icon + label did not align them. inline-flex + gap does. · there was NO focus style anywhere. Keyboard users had nothing to see. :focus-visible gives a ring to keyboard users without putting one on every mouse click. Variants: .btn-primary (default), .btn-secondary, .btn-outline, .btn-ghost, .btn-danger. Size: add .btn-sm. Use with or