/* ============================================================ Daybreak — Brand Color Tokens SINGLE SOURCE OF TRUTH for color across this site. HOW TO USE - Link this file FIRST in a page , before any other CSS: - Reference the variables: color: var(--db-green); - Do NOT hardcode hex values in pages. - Do NOT invent new shades or near-duplicates (no second lime, no new off-white). If a color isn't here, it isn't on-brand — raise it before adding one. NON-NEGOTIABLES - Primary brand green is #39B15A. Older artifacts (Toolkit PDF, Figma, Color Guide.jpg) say #39B15B. We override to #39B15A. Never use #39B15B. PROVENANCE - Names + values mirror Assets/Reference/Color Guide.jpg and the Figma variables (file 9XkP2WTprp99QDlQRdxieW, node 20:454). - Full usage rules, aliases, and gradient guidance: BRAND-COLORS.md If this file and BRAND-COLORS.md ever disagree, this file wins. ============================================================ */ :root { /* ---- Primary: Daybreak Green family ---- */ --db-green: #39B15A; /* Daybreak Green — PRIMARY brand color (override of #39B15B) */ --db-green-dark: #257A3F; /* Daybreak #2 — the "forest green" / dark green */ --db-green-light: #94D1A7; /* Daybreak #3 — light / misty green */ /* ---- Secondary: Lime family — governance / high-signal markers, not decoration ---- */ --db-lime: #B1D93C; /* Lime */ --db-lime-dark: #88A32F; /* Lime #2 — olive */ --db-lime-light: #D9EC98; /* Lime #3 — pale lime */ /* ---- Accent: Skyline ---- */ --db-skyline: #3B9CD9; /* Skyline — accent blue ("touch of sky") */ /* ---- Surface tints — calm backgrounds only; never a foreground brand color ---- */ --db-forest-tint: #DAE6DC; /* Forest tint — soft surface */ --db-skyline-tint: #D1E6E4; /* Skyline tint — soft surface */ /* ---- Neutrals ---- */ --db-dark: #222222; /* Dark — primary text / dark surfaces */ --db-light: #F6F6F6; /* Light — page / off-white background */ --db-white: #FFFFFF; /* Pure white */ --db-grey-1: #383838; /* Grey #1 */ --db-grey-2: #858585; /* Grey #2 */ --db-grey-3: #D4D4D4; /* Grey #3 */ /* ---- Gradients ---- Rule: use only ONE gradient variant per screen/section. Angle may adapt to layout; the color STOPS are fixed. */ /* Sunrise 1 — full intensity. Hero / brand moments. Requires WHITE or light type. Do not overlay on content-heavy layouts. Stops: Daybreak Green + Skyline. */ --db-gradient-sunrise: linear-gradient(135deg, #39B15A 0%, #3B9CD9 100%); /* Sunrise 2 — tinted, low-contrast. Section / surface backgrounds. Pairs with DARK text. */ --db-gradient-sunrise-soft: linear-gradient(135deg, #DAE6DC 0%, #D1E6E4 100%); /* Lime accent gradient — energetic accent only, used sparingly (seen in Color Guide.jpg). Not a "Sunrise" gradient. Stops: Daybreak Green + Lime. */ --db-gradient-lime: linear-gradient(135deg, #39B15A 0%, #B1D93C 100%); }