Colors

All colors use OKLCH format. Each token maps to a semantic name, not a visual property.

Accent Colors

BiglerNet Red

--accent-primary: oklch(52% 0.21 23)

Red (hover)

--accent-secondary: oklch(42% 0.18 23)

Red (soft fill)

--accent-light: oklch(90% 0.06 23)

Semantic Colors

Success

--success: oklch(65% 0.14 150)

Warning

--warn: oklch(70% 0.16 75)

Danger

--danger: oklch(55% 0.18 23)

Info

--info: oklch(62% 0.15 230)

Neutrals

--bg

Page canvas: oklch(99% 0.002 240)

--surface

Cards, panels: oklch(100% 0 0)

--fg

Primary text: oklch(18% 0.012 250)

--muted

Secondary text: oklch(54% 0.012 250)

Rules

1. Never hardcode a color value in component CSS — always use a token.
2. Red appears at most twice on any surface.
3. Backgrounds are neutral — nearly white for light, nearly black for dark.