/* public/assets/brand.css Bootstrap 5.3 theme bridge using your design tokens. Works with data-bs-theme="light|dark" on or . */ html, body { overscroll-behavior: none; } /* --------------------------- 1) Your tokens: LIGHT ---------------------------- */ :root, [data-bs-theme="light"] { /* Fonts */ --font-sans: "Inter", "DejaVu Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: "Sofia Sans Extra Condensed", "Inter", sans-serif; /* Brand / core */ --color-primary: rgb(16 6 159); --color-secondary: rgb(95 37 159); /* Surfaces */ --color-bg: rgb(248 247 242); --color-surface: rgb(255 255 255); /* Text */ --color-text: rgb(16 24 32); --color-muted: rgb(66 85 99); /* Status */ --color-success: rgb(74 119 41); --color-warning: rgb(190 77 0); --color-error: rgb(186 12 47); --color-info: rgb(16 6 159); /* Borders */ --color-border: rgb(16 24 32); /* Accents */ --color-accent-cyan: rgb(0 132 202); --color-accent-teal: rgb(0 150 136); --color-accent-amber: rgb(205 148 78); /* Chart */ --color-chart-1: rgb(29 66 138); --color-chart-2: rgb(0 132 202); --color-chart-3: rgb(74 119 41); --color-chart-4: rgb(205 148 78); --color-chart-5: rgb(136 44 131); --color-chart-6: rgb(124 37 41); } /* --------------------------- 2) Your tokens: DARK ---------------------------- */ [data-bs-theme="dark"] { /* Brand */ --color-primary: rgb(29 66 138); --color-secondary: rgb(88 44 131); /* Surfaces */ --color-bg: rgb(16 24 32); --color-surface: rgb(19 30 41); /* Text */ --color-text: rgb(221 229 237); --color-muted: rgb(152 164 174); /* Status */ --color-success: rgb(34 136 72); --color-warning: rgb(136 107 37); --color-error: rgb(124 37 41); --color-info: rgb(29 66 138); /* Borders */ --color-border: rgb(221 229 237); /* Accents */ --color-accent-cyan: rgb(64 180 255); --color-accent-teal: rgb(77 182 172); --color-accent-amber: rgb(255 193 120); /* Chart */ --color-chart-1: rgb(99 143 255); --color-chart-2: rgb(64 180 255); --color-chart-3: rgb(105 187 140); --color-chart-4: rgb(255 193 120); --color-chart-5: rgb(181 120 255); --color-chart-6: rgb(255 138 128); } /* --------------------------- 3) Map tokens -> Bootstrap variables (Bootstrap 5.3 uses CSS variables heavily) ---------------------------- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { /* Typography */ --bs-font-sans-serif: var(--font-sans); --bs-body-font-family: var(--font-sans); /* Core colors */ --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-muted); --bs-border-color: color-mix(in srgb, var(--color-border) 25%, transparent); /* Brand */ --bs-primary: var(--color-primary); --bs-secondary: var(--color-secondary); /* Status */ --bs-success: var(--color-success); --bs-warning: var(--color-warning); --bs-danger: var(--color-error); --bs-info: var(--color-info); /* Links */ --bs-link-color: var(--color-primary); --bs-link-hover-color: color-mix(in srgb, var(--color-primary) 75%, black); /* Cards / surfaces */ --bs-card-bg: var(--color-surface); --bs-dropdown-bg: var(--color-surface); --bs-modal-bg: var(--color-surface); } /* --------------------------- 4) Heading font (identity) ---------------------------- */ h1, h2, h3, h4, h5, h6, .heading-font { font-family: var(--font-heading); letter-spacing: 0.2px; } /* --------------------------- 5) Make Bootstrap components feel "yours" ---------------------------- */ .card, .dropdown-menu, .modal-content, .offcanvas, .toast { border-color: color-mix(in srgb, var(--color-border) 20%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .toast { box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 75%, black); } .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: color-mix(in srgb, var(--color-primary) 70%, transparent); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); } .form-control, .form-select { background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-border) 20%, transparent); } .form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--color-primary) 60%, transparent); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 20%, transparent); } /* Optional: subtle "app" rounding */ .btn, .card, .dropdown-menu, .modal-content, .offcanvas { border-radius: 1rem; } /* ------------------------------------------------- Accessibility: link colors + "on-accent" text - Light: links use primary - Dark: links use a brighter accent for contrast -------------------------------------------------- */ /* Link colors */ [data-bs-theme="light"] { --ml-link: var(--color-primary); --ml-link-hover: color-mix(in srgb, var(--color-primary) 80%, black); } [data-bs-theme="dark"] { /* brighter link for dark surfaces */ --ml-link: var(--color-accent-cyan); /* rgb(64 180 255) */ --ml-link-hover: color-mix(in srgb, var(--color-accent-cyan) 80%, white); } /* Apply to anchors (Bootstrap uses --bs-link-color, so we map into that too) */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-link-color: var(--ml-link); --bs-link-hover-color: var(--ml-link-hover); } /* ------------------------------------------------- "On" colors (text color to use on colored surfaces) -------------------------------------------------- */ :root, [data-bs-theme="light"] { --ml-on-dark: #fff; --ml-on-light: var(--color-text); } [data-bs-theme="dark"] { --ml-on-dark: #fff; --ml-on-light: #0b1117; /* slightly darker than --color-text for bright chips */ } /* ------------------------------------------------- Accessible accent badges/chips (cyan/teal/amber) - Use dark text on bright accent backgrounds -------------------------------------------------- */ .badge.text-bg-info, .badge.text-bg-warning { color: var(--ml-on-light) !important; } /* For custom "accent" badges you might add later */ .badge.badge-accent-cyan { background: var(--color-accent-cyan) !important; color: var(--ml-on-light) !important; } .badge.badge-accent-teal { background: var(--color-accent-teal) !important; color: var(--ml-on-light) !important; } .badge.badge-accent-amber { background: var(--color-accent-amber) !important; color: var(--ml-on-light) !important; } /* Optional: keep primary/secondary badges readable (white text is fine) */ .badge.text-bg-primary, .badge.text-bg-secondary, .badge.text-bg-success, .badge.text-bg-danger { color: var(--ml-on-dark) !important; }