/* ============================================================ BRIX THEMES — _themes.css System: - Background: .brix-light (white) / .brix-dark (dark) - Accent: .brix-blue, .brix-red, .brix-green, .brix-purple, .brix-orange, .brix-teal, .brix-gold, .brix-rose Apply both classes to or any wrapper: ============================================================ */ /* --- LIGHT BACKGROUND --- */ .brix-light { --brix-bg: #ffffff; --brix-bg-alt: #f8f9fa; --brix-bg-subtle: #f1f3f5; --brix-text: #212529; --brix-text-muted: #6c757d; --brix-text-inverse: #ffffff; --brix-border: #dee2e6; --brix-border-light: #e9ecef; --brix-shadow: rgba(0, 0, 0, 0.08); --brix-shadow-lg: rgba(0, 0, 0, 0.12); --brix-nav-hover-bg: rgba(0, 0, 0, 0.04); } /* --- DARK BACKGROUND --- */ .brix-dark { --brix-bg: #0f1117; --brix-bg-alt: #1a1d27; --brix-bg-subtle: #232733; --brix-text: #f1f3f5; --brix-text-muted: #adb5bd; --brix-text-inverse: #0f1117; --brix-border: #2d3341; --brix-border-light: #373d4a; --brix-shadow: rgba(0, 0, 0, 0.3); --brix-shadow-lg: rgba(0, 0, 0, 0.5); --brix-nav-hover-bg: rgba(255, 255, 255, 0.06); } /* --- ACCENT COLORS --- */ /* Blue (default) */ .brix-blue { --brix-accent: #2563eb; --brix-accent-hover: #1d4ed8; --brix-accent-light: rgba(37, 99, 235, 0.1); --brix-accent-text: #ffffff; } /* Red */ .brix-red { --brix-accent: #dc2626; --brix-accent-hover: #b91c1c; --brix-accent-light: rgba(220, 38, 38, 0.1); --brix-accent-text: #ffffff; } /* Green */ .brix-green { --brix-accent: #16a34a; --brix-accent-hover: #15803d; --brix-accent-light: rgba(22, 163, 74, 0.1); --brix-accent-text: #ffffff; } /* Purple */ .brix-purple { --brix-accent: #7c3aed; --brix-accent-hover: #6d28d9; --brix-accent-light: rgba(124, 58, 237, 0.1); --brix-accent-text: #ffffff; } /* Orange */ .brix-orange { --brix-accent: #ea580c; --brix-accent-hover: #c2410c; --brix-accent-light: rgba(234, 88, 12, 0.1); --brix-accent-text: #ffffff; } /* Teal */ .brix-teal { --brix-accent: #0d9488; --brix-accent-hover: #0f766e; --brix-accent-light: rgba(13, 148, 136, 0.1); --brix-accent-text: #ffffff; } /* Gold */ .brix-gold { --brix-accent: #ca8a04; --brix-accent-hover: #a16207; --brix-accent-light: rgba(202, 138, 4, 0.1); --brix-accent-text: #ffffff; } /* Rose */ .brix-rose { --brix-accent: #e11d48; --brix-accent-hover: #be123c; --brix-accent-light: rgba(225, 29, 72, 0.1); --brix-accent-text: #ffffff; } /* --- SHARED TOKENS --- */ .brix-light, .brix-dark { color: var(--brix-text); background-color: var(--brix-bg); --brix-radius: 0.5rem; --brix-radius-sm: 0.25rem; --brix-radius-lg: 1rem; --brix-radius-pill: 50rem; --brix-transition: 0.2s ease; --brix-transition-slow: 0.4s ease; --brix-font-base: 'Inter', system-ui, -apple-system, sans-serif; --brix-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --brix-header-height: 72px; } /* --- Dark mode overrides for third-party components --- */ .brix-dark .accordion-button { color: var(--brix-text); background-color: var(--brix-bg); } .brix-dark .accordion-button::after { filter: invert(1); } .brix-dark .accordion-button:not(.collapsed) { color: var(--brix-accent); background-color: var(--brix-bg); box-shadow: none; } .brix-dark .accordion-body { background-color: var(--brix-bg); } .brix-dark .text-muted { color: var(--brix-text-muted) !important; } .brix-dark .form-control, .brix-dark .form-select { color: var(--brix-text); background-color: var(--brix-bg-alt); border-color: var(--brix-border); } .brix-dark .form-control::placeholder { color: var(--brix-text-muted); } .brix-dark .form-label { color: var(--brix-text); } .brix-dark .form-check-label { color: var(--brix-text); } .brix-dark .card { background-color: var(--brix-bg); border-color: var(--brix-border); color: var(--brix-text); } .brix-dark .list-group-item { background-color: var(--brix-bg); border-color: var(--brix-border); color: var(--brix-text); } .brix-dark .modal-content { background-color: var(--brix-bg); border-color: var(--brix-border); color: var(--brix-text); } .brix-dark .table { color: var(--brix-text); border-color: var(--brix-border); }