/* * EduNode — Branch Theme Tokens * * Palette: sage green + warm cream + burnt terracotta. Translated to RGB * triples (space-separated) so Tailwind's `bg-brand/50` opacity modifiers * keep working. * * Source: "The Compass Book" refreshed brand concept (2026 designer pass) — * see `docs/concept/edunode/`. Sage #4F6F52 is the brand/dark surface, cream * #F5EFE7 the canvas, terracotta #D08159 the CTA, charcoal #1E293B the text. * Contrast spot-checks: cream text on sage hits WCAG AA; terracotta CTAs sit * on cream/white sections (terracotta-on-sage is weak — keep cream there). * * Selector is `:root:root` (not `:root`) ON PURPOSE: in `npm run dev` Vite * injects app.css's `:root` engine-default tokens into AFTER this static * , so an equal-specificity `:root` would lose on source order and the * page would render engine colours. The doubled `:root:root` raises specificity * so the branch palette wins regardless of load order — in dev AND prod. */ :root:root { /* Page / canvas */ --color-background: 245 239 231; /* cream #F5EFE7 */ --color-foreground: 30 41 59; /* charcoal #1E293B */ /* Brand — sage green */ --color-brand: 79 111 82; /* #4F6F52 */ --color-brand-hover: 68 95 71; /* #445F47 */ --color-brand-active: 58 79 60; /* #3A4F3C */ --color-brand-muted: 107 122 107; /* #6B7A6B */ --color-brand-subtle: 226 234 226; /* #E2EAE2 */ --color-brand-foreground: 245 239 231; /* cream text on sage */ /* Accent — burnt terracotta */ --color-accent: 208 129 89; /* #D08159 */ --color-accent-hover: 189 112 74; /* #BD704A */ --color-accent-subtle: 243 224 214; /* #F3E0D6 */ --color-accent-foreground: 255 255 255; /* Surfaces */ --color-card: 255 255 255; /* white */ --color-card-foreground: 30 41 59; --color-surface-raised: 251 247 240; /* warm cream #FBF7F0 */ /* Subdued */ --color-muted: 236 229 218; /* darker cream */ --color-muted-foreground: 107 122 107; /* #6B7A6B */ /* Borders */ --color-border: 220 228 220; /* pale sage #DCE4DC */ --color-border-strong: 194 208 194; /* #C2D0C2 */ /* Semantic — info shifted toward brand to fit the palette */ --color-info: 3 105 161; /* #0369A1 */ /* Footer — sage ties to brand */ --color-footer: 79 111 82; /* sage #4F6F52 */ --color-footer-foreground: 245 239 231; /* cream */ /* Radii — softer than engine for a friendlier coaching feel */ --radius-brand: 0.5rem; /* rounded-lg */ --radius-card: 0.75rem; /* rounded-xl */ }