/* ============================================================ BRAINZIE — BRAND TOKENS The single source of the Brainzie palette, type, shape and depth. Tokens ONLY — no element selectors, no layout. Consumed by: - the landing site (via brainzie.css → brainzie-site.css), and - every Brainzie app (via brainzie-ui.css), which copies this file in at build time from the brainzie-landing repo. Never fork it. Live catalogue: /styleguide.html · identity rules: /brand-guidelines.html SUB-BRAND HOOK — an app may override, in its own theme layer, ONLY: --secondary, --accent-orange, --accent-coral, --good, --bad, --grad-flourish Everything else (the magenta signature, neutrals, type, shape) is the shared Brainzie identity and stays untouched. ============================================================ */ :root { /* ---- Signature ---- */ --brand: #D81B72; /* PRIMARY — the one hue people remember */ --brand-deep: #A8155A; /* hovers / pressed / text-on-light */ --brand-tint: #FCE4F0; /* soft fills, badges, selection */ /* ---- Secondary (sparingly) ---- */ --secondary: #6D28D9; /* violet — depth, supporting headings */ --accent-orange:#FB8B24; /* a spark — highlights only */ --accent-coral: #FF4D6D; /* reserved for ONE key action */ /* ---- Semantic (data direction — deltas, verdicts) ---- */ --good: #18A06B; --bad: #E5484D; /* ---- Neutrals (warm, slightly violet — never cold grey) ---- */ --ink: #18122B; --ink-soft: #4A4361; --muted: #847B9C; --line: #ECE7F2; --paper: #FDFBFE; --paper-2: #F6F1FB; --white: #FFFFFF; /* ---- Gradient: a flourish, not the identity ---- */ --grad-flourish: linear-gradient(135deg, #FB8B24 0%, #D81B72 55%, #6D28D9 100%); /* ---- Type ---- */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* ---- Shape & depth ---- */ --radius: 18px; --radius-s: 11px; --shadow: 0 20px 54px -24px rgba(46,16,101,.42); --shadow-s: 0 10px 26px -16px rgba(46,16,101,.38); --maxw: 1140px; } /* ============================================================ Dark theme — neutral tokens flip; the magenta brand hue is preserved. OPT-IN: only documents carrying data-bz-theming on participate (the apps), so the landing site keeps its light identity regardless of the visitor's OS preference. Resolution: an explicit data-theme always wins; with none set, the OS preference decides. The block is declared twice (media query + explicit attribute) because CSS can't share one value set across the two selectors; keep them in sync. ============================================================ */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-bz-theming]:not([data-theme="light"]) { color-scheme: dark; --ink: #F4F1FA; --ink-soft: #C9C2DE; --muted: #9088A8; --line: #2C2542; --paper: #120E1E; --paper-2: #1A1430; --white: #1E1834; /* card / raised surface */ --brand-tint: rgba(216, 27, 114, .20); --good: #2FC98C; --bad: #F1656A; } } :root[data-bz-theming][data-theme="dark"] { color-scheme: dark; --ink: #F4F1FA; --ink-soft: #C9C2DE; --muted: #9088A8; --line: #2C2542; --paper: #120E1E; --paper-2: #1A1430; --white: #1E1834; --brand-tint: rgba(216, 27, 114, .20); --good: #2FC98C; --bad: #F1656A; }