/* ============================================================ THEME SYSTEM — BlackBX ============================================================ All visual colors flow through these variables. To create a new theme, duplicate a block and change values. Dark mode: add class="dark" to , or use the toggle. ============================================================ */ /* ---- LIGHT THEME (default) ---- */ :root, [data-theme="light"] { /* Brand */ --color-primary: #082A3A; --color-primary-light: #0D3442; --color-primary-dark: #0A2833; --color-primary-10: rgba(8, 42, 58, 0.1); --color-primary-20: rgba(8, 42, 58, 0.2); --color-primary-30: rgba(8, 42, 58, 0.3); /* Accent (gradient text, labels) */ --color-accent-1: #0D6B9C; --color-accent-2: #1B5C8A; --color-accent-3: #2B4D78; /* Surfaces */ --color-bg-page: #F9FAFB; --color-bg-elevated: #FFFFFF; --color-bg-tint: #F7FBFF; --color-bg-hover: #F3F4F6; --color-bg-card: #FFFFFF; --color-bg-card-alt: #F9FAFB; --color-bg-drawer: rgba(255, 255, 255, 0.72); /* Borders */ --color-border: #E5E7EB; --color-border-subtle: rgba(229, 231, 235, 0.8); --color-border-strong: #D1D5DB; /* Text */ --color-text-primary: #111827; --color-text-secondary: #374151; --color-text-muted: #6B7280; --color-text-faint: rgba(8, 42, 58, 0.3); --color-text-inverse: #FFFFFF; /* Misc */ --color-alert: #FF3B3B; --color-success: #22C55E; --color-shadow: rgba(15, 23, 42, 0.08); --color-shadow-heavy: rgba(15, 23, 42, 0.16); --color-overlay: rgba(15, 23, 42, 0.16); /* Glitch */ --color-glitch-1: #60A5FA; --color-glitch-2: #64748B; /* Grid pattern */ --color-grid-line: rgba(17, 24, 39, 0.03); --color-dot-pattern: rgba(8, 42, 58, 0.05); /* Logo treatment */ --logo-filter: grayscale(1); --logo-opacity: 0.62; --logo-blend: darken; /* Body gradient */ --body-gradient: radial-gradient(circle at top center, rgba(13, 107, 156, 0.08), transparent 32%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)); } /* ---- DARK THEME ---- */ [data-theme="dark"] { /* Brand — inverted: light teal on dark */ --color-primary: #7DD3E8; --color-primary-light: #5BC0D5; --color-primary-dark: #A3E4F0; --color-primary-10: rgba(125, 211, 232, 0.1); --color-primary-20: rgba(125, 211, 232, 0.15); --color-primary-30: rgba(125, 211, 232, 0.25); /* Accent */ --color-accent-1: #5CB8DB; --color-accent-2: #7ECAE0; --color-accent-3: #A0D8EB; /* Surfaces */ --color-bg-page: #0B1419; --color-bg-elevated: #111D24; --color-bg-tint: #0D1E27; --color-bg-hover: #162A35; --color-bg-card: #111D24; --color-bg-card-alt: #0E1920; --color-bg-drawer: rgba(11, 20, 25, 0.88); /* Borders */ --color-border: #1E3340; --color-border-subtle: rgba(30, 51, 64, 0.7); --color-border-strong: #2A4555; /* Text */ --color-text-primary: #E8F0F4; --color-text-secondary: #B0C4CE; --color-text-muted: #6B8A9A; --color-text-faint: rgba(125, 211, 232, 0.25); --color-text-inverse: #0B1419; /* Misc */ --color-alert: #FF6B6B; --color-success: #4ADE80; --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-heavy: rgba(0, 0, 0, 0.5); --color-overlay: rgba(0, 0, 0, 0.4); /* Glitch */ --color-glitch-1: #38BDF8; --color-glitch-2: #94A3B8; /* Grid pattern */ --color-grid-line: rgba(125, 211, 232, 0.04); --color-dot-pattern: rgba(125, 211, 232, 0.06); /* Logo treatment */ --logo-filter: grayscale(1) brightness(1.8); --logo-opacity: 0.5; --logo-blend: normal; /* Body gradient */ --body-gradient: radial-gradient(circle at top center, rgba(13, 107, 156, 0.12), transparent 32%), linear-gradient(180deg, rgba(11, 20, 25, 0.98), rgba(14, 25, 32, 0.98)); }