/* ============================================================ Botnest color tokens — primitives + semantic aliases. Two first-class themes telling one story: DAWN (default) — golden dawn: warm stone neutrals, alpenglow. NIGHT — aurora night: deep landscape blues, aurora green, rose-magenta shimmer. Set the theme with . No attribute = dawn. Rules encoded here: - Vibrant chrome, calm content: aurora color lives in --bn-chrome-* / --bn-grad-* / accent tokens only. - Semantic exclusivity: green=success, red=danger, amber=warning, glacier blue=interactive. Decorative tokens never restyle actionable elements. - Magenta leans pink/rose (hue ≈ 350). Violet is banned. ============================================================ */ :root { /* ---- Night ramp (cool blue-slate) ---- */ --bn-night-950: #0A101E; --bn-night-925: #0C1424; --bn-night-900: #111A2E; --bn-night-850: #16223A; --bn-night-800: #1C2B48; --bn-night-750: #22314F; --bn-night-700: #2A3B5E; --bn-night-600: #3C5078; --bn-night-500: #566B93; --bn-night-400: #7489AC; --bn-night-300: #93A5C4; --bn-night-200: #B7C4DA; --bn-night-100: #D8E0ED; --bn-night-50: #EDF1F8; /* ---- Stone ramp (warm dawn neutrals) ---- */ --bn-stone-0: #FFFFFF; --bn-stone-50: #FAF7F1; --bn-stone-100: #F3EEE4; --bn-stone-150: #ECE5D7; --bn-stone-200: #E2D9C9; --bn-stone-300: #CFC4AF; --bn-stone-400: #B0A48D; --bn-stone-500: #8B8069; --bn-stone-600: #6E6450; --bn-stone-700: #554C3B; --bn-stone-800: #3B342A; --bn-stone-900: #2A241C; /* ---- Aurora green (teal-leaning; identity + success) ---- */ --bn-green-100: #D9F6E8; --bn-green-200: #ADEBD1; --bn-green-300: #77DCB3; --bn-green-400: #4CCB97; --bn-green-500: #2FB37F; --bn-green-600: #1F9066; --bn-green-700: #187350; --bn-green-800: #135A40; --bn-green-900: #0F4331; /* ---- Aurora rose (magenta that leans pink — never violet) ---- */ --bn-rose-100: #FCE1EC; --bn-rose-200: #F8BFD7; --bn-rose-300: #F195BD; --bn-rose-400: #E76BA3; --bn-rose-500: #D6478A; --bn-rose-600: #B32E6E; --bn-rose-700: #8F2257; --bn-rose-800: #6E1A44; /* ---- Glacier blue (the interactive hue) ---- */ --bn-sky-100: #DCEAFB; --bn-sky-200: #BDD8F7; --bn-sky-300: #97BFF1; --bn-sky-400: #74A8E9; --bn-sky-500: #4C88D8; --bn-sky-600: #2F6ABE; --bn-sky-700: #24539B; --bn-sky-800: #1C4076; /* ---- Dawn gold (decorative alpenglow only — never a control) ---- */ --bn-gold-100: #FBEED3; --bn-gold-200: #F5DCA4; --bn-gold-300: #EDC672; --bn-gold-400: #E0AC47; --bn-gold-500: #C48F2C; --bn-gold-600: #9C701D; --bn-gold-700: #7A5715; /* ---- Red (danger / destructive only) ---- */ --bn-red-100: #FCE3DC; --bn-red-200: #F8C2B4; --bn-red-300: #F29B86; --bn-red-400: #E97757; --bn-red-500: #D4573B; --bn-red-600: #B03E24; --bn-red-700: #8C2F1B; /* ---- Amber (warning / caution only) ---- */ --bn-amber-100: #FBECC9; --bn-amber-200: #F6D88F; --bn-amber-300: #EDBE55; --bn-amber-400: #DBA32E; --bn-amber-500: #B5821A; --bn-amber-600: #8C6410; --bn-amber-700: #6D4E0C; } /* ============ DAWN (default) ============ */ :root, [data-bn-theme="dawn"] { color-scheme: light; --bn-bg: var(--bn-stone-50); --bn-surface: var(--bn-stone-0); --bn-surface-2: var(--bn-stone-100); --bn-surface-3: var(--bn-stone-150); --bn-inset: var(--bn-stone-100); --bn-overlay: rgba(42, 36, 28, 0.44); --bn-glass: rgba(255, 253, 248, 0.80); --bn-chrome-bg: #F6EFE1; --bn-chrome-text: var(--bn-stone-800); --bn-chrome-text-dim: #655C49; --bn-grad-aurora: linear-gradient(150deg, #FDF9EF 0%, #FAF0DC 40%, #F6E7D2 72%, #F3DECD 100%); --bn-grad-aurora-rose: radial-gradient(120% 90% at 88% 8%, rgba(214, 71, 138, 0.10), transparent 60%); --bn-grad-hero: linear-gradient(165deg, #FDF9EF 0%, #F8ECD6 55%, #EFE7D2 100%); --bn-text: var(--bn-stone-900); --bn-text-2: var(--bn-stone-600); --bn-text-3: #776D57; --bn-text-disabled: var(--bn-stone-400); --bn-text-inverse: var(--bn-stone-0); --bn-border-subtle: #ECE4D4; --bn-border: #DCD2BE; --bn-border-strong: #BFB29A; /* Dawn buttons are grounded: deep fill, light label */ --bn-link: var(--bn-sky-700); --bn-link-hover: var(--bn-sky-800); --bn-action: var(--bn-sky-600); --bn-action-hover: var(--bn-sky-700); --bn-action-press: var(--bn-sky-800); --bn-on-action: #FFFFFF; --bn-action-subtle: rgba(47, 106, 190, 0.09); --bn-action-subtle-hover: rgba(47, 106, 190, 0.16); --bn-selected: rgba(47, 106, 190, 0.10); --bn-spotlight-strong: rgba(47, 106, 190, 0.13); /* row-hover spotlight core */ --bn-spotlight-soft: rgba(47, 106, 190, 0.06); --bn-success-fill: var(--bn-green-700); --bn-on-success: #FFFFFF; --bn-success-text: var(--bn-green-700); --bn-success-subtle: #E2F4EA; --bn-success-border: #9BD8BC; --bn-danger-fill: var(--bn-red-600); --bn-danger-hover: var(--bn-red-700); --bn-on-danger: #FFFFFF; --bn-danger-text: var(--bn-red-600); --bn-danger-subtle: #FBE7DF; --bn-danger-border: #F0B4A2; --bn-warning-fill: var(--bn-amber-600); --bn-on-warning: #FFFFFF; --bn-warning-text: var(--bn-amber-600); --bn-warning-subtle: #F9EFD2; --bn-warning-border: #E5C983; --bn-info-text: var(--bn-sky-700); --bn-info-subtle: #E9F0FA; --bn-info-border: #AECBF0; --bn-accent-green: var(--bn-green-600); --bn-accent-rose: var(--bn-rose-500); --bn-accent-gold: var(--bn-gold-400); /* Horizon mark (theme-adaptive, used by AppLogo) */ --bn-logo-sky-a: #0FA36C; --bn-logo-sky-b: #CE3E80; --bn-logo-ground: #554C3B; --bn-focus-ring: var(--bn-sky-600); --bn-focus-glow: 0 0 0 3px rgba(31, 144, 102, 0.22), 0 0 12px rgba(31, 144, 102, 0.18); --bn-shadow-pool: rgba(58, 48, 32, 0.14); /* cursor-pooled tilt shadow */ --bn-shadow-1: 0 1px 2px rgba(58, 48, 32, 0.10); --bn-shadow-2: 0 4px 14px rgba(58, 48, 32, 0.12); --bn-shadow-3: 0 12px 36px rgba(58, 48, 32, 0.18); --bn-glow-green: 0 0 24px rgba(31, 144, 102, 0.14); --bn-glow-rose: 0 0 24px rgba(214, 71, 138, 0.12); --bn-skeleton-a: var(--bn-stone-100); --bn-skeleton-b: var(--bn-stone-150); --bn-track: var(--bn-stone-150); } /* ============ NIGHT ============ */ [data-bn-theme="night"] { color-scheme: dark; /* Surfaces — calm content zones */ --bn-bg: var(--bn-night-925); --bn-surface: var(--bn-night-900); --bn-surface-2: var(--bn-night-850); --bn-surface-3: var(--bn-night-800); --bn-inset: var(--bn-night-950); --bn-overlay: rgba(6, 10, 20, 0.62); --bn-glass: rgba(17, 26, 46, 0.78); /* Chrome — identity zones (nav, headers, heroes) */ --bn-chrome-bg: var(--bn-night-950); --bn-chrome-text: var(--bn-night-100); --bn-chrome-text-dim: var(--bn-night-300); --bn-grad-aurora: linear-gradient(150deg, #0B1526 0%, #0E2038 42%, #113632 78%, #123C31 100%); --bn-grad-aurora-rose: radial-gradient(120% 90% at 88% 8%, rgba(231,107,163,0.12), transparent 62%); --bn-grad-hero: linear-gradient(165deg, #0A101E 0%, #0F2440 55%, #11382C 100%); /* Text */ --bn-text: var(--bn-night-50); --bn-text-2: var(--bn-night-200); --bn-text-3: var(--bn-night-300); --bn-text-disabled: var(--bn-night-500); --bn-text-inverse: var(--bn-night-950); /* Borders */ --bn-border-subtle: #1B2843; --bn-border: #26365A; --bn-border-strong: #35486F; /* Interactive (glacier) — night buttons are moonlit: light fill, dark label */ --bn-link: var(--bn-sky-300); --bn-link-hover: var(--bn-sky-200); --bn-action: var(--bn-sky-300); --bn-action-hover: var(--bn-sky-200); --bn-action-press: var(--bn-sky-400); --bn-on-action: var(--bn-night-950); --bn-action-subtle: rgba(116, 168, 233, 0.14); --bn-action-subtle-hover: rgba(116, 168, 233, 0.22); --bn-selected: rgba(116, 168, 233, 0.16); --bn-spotlight-strong: rgba(116, 168, 233, 0.16); /* row-hover spotlight core */ --bn-spotlight-soft: rgba(116, 168, 233, 0.08); /* Semantic — exclusive hues */ --bn-success-fill: var(--bn-green-300); --bn-on-success: var(--bn-night-950); --bn-success-text: var(--bn-green-300); --bn-success-subtle: rgba(76, 203, 151, 0.14); --bn-success-border: rgba(76, 203, 151, 0.45); --bn-danger-fill: var(--bn-red-300); --bn-danger-hover: var(--bn-red-200); --bn-on-danger: var(--bn-night-950); --bn-danger-text: var(--bn-red-300); --bn-danger-subtle: rgba(233, 119, 87, 0.14); --bn-danger-border: rgba(233, 119, 87, 0.50); --bn-warning-fill: var(--bn-amber-300); --bn-on-warning: var(--bn-night-950); --bn-warning-text: var(--bn-amber-300); --bn-warning-subtle: rgba(224, 172, 71, 0.13); --bn-warning-border: rgba(224, 172, 71, 0.45); --bn-info-text: var(--bn-sky-300); --bn-info-subtle: rgba(116, 168, 233, 0.13); --bn-info-border: rgba(116, 168, 233, 0.45); /* Identity accents (decorative zones only) */ --bn-accent-green: var(--bn-green-400); --bn-accent-rose: var(--bn-rose-400); --bn-accent-gold: var(--bn-gold-300); /* Horizon mark (theme-adaptive, used by AppLogo) */ --bn-logo-sky-a: #4CCB97; --bn-logo-sky-b: #E76BA3; --bn-logo-ground: #22314F; /* Focus — glacier ring with a gentle aurora glow */ --bn-focus-ring: var(--bn-sky-300); --bn-focus-glow: 0 0 0 3px rgba(76, 203, 151, 0.28), 0 0 14px rgba(76, 203, 151, 0.22); /* Soft depth */ --bn-shadow-pool: rgba(2, 6, 14, 0.55); /* cursor-pooled tilt shadow */ --bn-shadow-1: 0 1px 2px rgba(4, 8, 16, 0.4); --bn-shadow-2: 0 4px 14px rgba(4, 8, 16, 0.45); --bn-shadow-3: 0 12px 36px rgba(3, 6, 14, 0.55); --bn-glow-green: 0 0 24px rgba(76, 203, 151, 0.18); --bn-glow-rose: 0 0 24px rgba(231, 107, 163, 0.16); --bn-skeleton-a: var(--bn-night-850); --bn-skeleton-b: var(--bn-night-800); --bn-track: var(--bn-night-800); }