Skip to main content

Light Theme Variables

Defined inside :root.light { ... } in /src/global-styles/variables.css.

Colors — Light mode (Warm Hedgehog Palette)

VariableValuePreviewDescriptionUsage
--color-bg#F8EACDSoft cream (hedgehog belly)Page background
--color-primary#6A3817Warm brown (hedgehog fur)Buttons, links, accents
--color-primary-dark#532E1ADarker brownHover states
--color-secondary#D7A47DGolden/tan accentSecondary accents
--color-accent#FABFC0Soft pink (hedgehog belly)Tertiary accents
--color-text#2c1a1aDark brownPrimary text
--color-text-light#69432EMedium brownSecondary text
--color-border#EECEA4Warm beigeBorders, dividers
--color-error#e94b4bRed for errorsError messages, validation
--color-success#4bb543Green for successSuccess messages

Glass effect — Light mode

VariableValuePreviewDescription
--glass-bgrgba(248, 234, 205, 0.25)Cream-tinted glass background
--glass-borderrgba(106, 56, 23, 0.15)Brown-tinted glass border
--glass-shadowrgba(83, 46, 26, 0.1)Warm brown shadow
--glass-table-borderrgba(215, 164, 125, 0.3)Table borders in glass cards
--glass-table-row-oddrgba(248, 234, 205, 0.5)Odd table row background
--glass-table-row-hoverrgba(250, 191, 192, 0.3)Table row hover (pink tint)
--glass-table-stackedrgba(238, 206, 164, 0.7)Stacked table elements