/* CareHub brand tokens — flat palette, light + dark. Import this and use var(--brand-*). Values match brand-kit.md. Both dark selectors below carry the SAME set of tokens so a chip/hover/surface never falls back to a light value on a dark ground. */ :root { /* Core palette */ --brand-blue: #1B5C99; /* Care Blue — primary */ --brand-blue-hover: #154B7F; --brand-blue-subtle: #EAF1F8; --brand-navy: #14315C; /* Deep Navy — ink */ --brand-green: #57A64A; /* Care Green — secondary (fill/accent only, not text on white) */ --brand-green-hover: #478C3D; --brand-green-subtle:#EDF5EA; --brand-gray: #6B6E70; /* Slate Gray — muted */ /* Semantic (light theme default) */ --brand-bg: #FFFFFF; --brand-surface: #F4F6F9; --brand-ink: #14315C; --brand-muted: #6B6E70; --brand-primary: var(--brand-blue); --brand-accent: var(--brand-green); --brand-line: #E3E8EE; --brand-on-primary:#FFFFFF; --brand-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Dark theme — add data-theme="dark" on (or use the media query below). */ :root[data-theme="dark"] { --brand-blue-hover: #5A9BD8; --brand-blue-subtle: #16324E; --brand-green-hover: #7FCB64; --brand-green-subtle:#1B3324; --brand-bg: #0E2038; /* Dark Navy */ --brand-surface: #16283F; --brand-ink: #F4F8FC; --brand-muted: #9DB0C2; --brand-primary: #3D86CB; /* lightened blue for contrast */ --brand-accent: #6FBE54; /* lightened green */ --brand-line: #24405F; --brand-on-primary:#0B1626; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-blue-hover: #5A9BD8; --brand-blue-subtle: #16324E; --brand-green-hover: #7FCB64; --brand-green-subtle:#1B3324; --brand-bg: #0E2038; --brand-surface: #16283F; --brand-ink: #F4F8FC; --brand-muted: #9DB0C2; --brand-primary: #3D86CB; --brand-accent: #6FBE54; --brand-line: #24405F; --brand-on-primary:#0B1626; } }