/* herbygibbi design tokens. The handoff ships dark as :root and light as .light; BlazorBlueprint's ThemeService drives the theme by toggling .dark on , so the two palettes are swapped onto its selectors. The values are the handoff's, unchanged, and the head script in App.razor still lands on dark by default for a visitor whose system asks for it. */ :root { /* Brand primitives — the five sprite colors. Never mix new colors into these. */ --hg-pink: #de8590; --hg-snout: #b4566b; --hg-ink: #241a1c; --hg-cream: #f7eef0; --hg-mud: #141014; --hg-brand: #de8590; --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; --font-pixel: 'Pixelify Sans', ui-monospace, monospace; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --radius: 0.5rem; --hg-cell: 6px; --background: #faf6f7; --foreground: #241a1c; --card: #ffffff; --card-foreground: #241a1c; --popover: #ffffff; --popover-foreground: #241a1c; --primary: #de8590; --primary-foreground: #241a1c; --secondary: #f3e9eb; --secondary-foreground: #241a1c; --muted: #f6f0f1; --muted-foreground: #6d5a60; --accent: #f6e9ec; --accent-foreground: #241a1c; --destructive: #c2452a; --destructive-foreground: #f7eef0; --border: #ecdfe2; --input: #d9c8cd; --ring: oklch(0.72 0.08 10); --hg-frame: #241a1c; --hg-fg-3: #a08d93; --hg-ok: oklch(72.3% 0.219 149.579); --sidebar: #f6f0f1; --sidebar-foreground: #241a1c; --sidebar-primary: #de8590; --sidebar-primary-foreground: #241a1c; --sidebar-accent: #f6e9ec; --sidebar-accent-foreground: #241a1c; --sidebar-border: #ecdfe2; --sidebar-ring: oklch(0.72 0.08 10); } .dark { --background: #141014; --foreground: #f7eef0; --card: #1a151a; --card-foreground: #f7eef0; --popover: #1a151a; --popover-foreground: #f7eef0; --primary: #de8590; --primary-foreground: #241a1c; --secondary: #241d24; --secondary-foreground: #f7eef0; --muted: #1a151a; --muted-foreground: #b9a8ae; --accent: #251e25; --accent-foreground: #f7eef0; --destructive: #c2452a; --destructive-foreground: #f7eef0; --border: #2b232b; --input: #3a2f3a; --hg-frame: #0c090c; --hg-fg-3: #857278; --sidebar: #100c10; --sidebar-foreground: #f7eef0; --sidebar-primary: #de8590; --sidebar-primary-foreground: #241a1c; --sidebar-accent: #251e25; --sidebar-accent-foreground: #f7eef0; --sidebar-border: #2b232b; } * { border-color: var(--border); } html { -webkit-text-size-adjust: 100%; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 0.9375rem; } ::selection { background: var(--hg-brand); color: var(--hg-ink); } /* The sprite blinks: applied to the pig mark's eye layer, 6s cycle, two frames. */ @keyframes hg-blink { 0%, 91%, 95%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.08); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }