/* ============================================================================ * vwa-bootstrap-overrides.css * ---------------------------------------------------------------------------- * VWA brand system — Bootstrap variable & utility overrides. * * Loads AFTER Bootstrap's CDN bundle, BEFORE vwa-components.css and vwa-pages.css. * * link order: * * ← this file * * * * Token system version: v2.1.1-AAA * Last updated: April 2026 (extracted in v4.9 consolidation) * ============================================================================ */ /* === TOKENS — Bootstrap variable overrides + custom --vwa-* tokens === */ :root { /* === BOOTSTRAP THEME OVERRIDES === */ --bs-primary: #0a1f2e; --bs-primary-rgb: 10, 31, 46; --bs-secondary: #c9a961; --bs-secondary-rgb: 201, 169, 97; --bs-success: #1f5a3f; --bs-success-rgb: 31, 90, 63; --bs-info: #446083; --bs-info-rgb: 68, 96, 131; --bs-warning: #b88a2e; --bs-warning-rgb: 184, 138, 46; --bs-danger: #9a2e25; --bs-danger-rgb: 154, 46, 37; --bs-light: #fafaf7; --bs-light-rgb: 250, 250, 247; --bs-dark: #06151f; --bs-dark-rgb: 6, 21, 31; /* Bootstrap 5.3 subtle/emphasis variants */ --bs-primary-bg-subtle: #e7ebee; --bs-primary-border-subtle: #6f8090; --bs-primary-text-emphasis: #091b29; --bs-secondary-bg-subtle: #f9f3e3; --bs-secondary-border-subtle: #a88b4b; --bs-secondary-text-emphasis: #5a4015; --bs-success-bg-subtle: #e0f0e8; --bs-success-border-subtle: #4f8465; --bs-success-text-emphasis: #1c4d37; --bs-info-bg-subtle: #edf1f6; --bs-info-border-subtle: #5e7e9c; --bs-info-text-emphasis: #28405a; --bs-warning-bg-subtle: #f5ebd3; --bs-warning-border-subtle: #a88b4b; --bs-warning-text-emphasis: #5c4415; --bs-danger-bg-subtle: #f5e0dd; --bs-danger-border-subtle: #b05850; --bs-danger-text-emphasis: #7a2520; /* Body */ --bs-body-color: #0a1f2e; --bs-body-bg: #ffffff; --bs-body-color-rgb: 10, 31, 46; --bs-secondary-color: #3a4752; --bs-secondary-color-rgb: 58, 71, 82; --bs-tertiary-color: #445360; /* AAA: 7.57:1 on porcelain */ --bs-tertiary-color-rgb: 68, 83, 96; --bs-emphasis-color: #040e16; --bs-border-color: #e5e5e0; /* Typography */ --bs-body-font-family: "Barlow", -apple-system, system-ui, sans-serif; --bs-font-monospace: "JetBrains Mono", ui-monospace, monospace; --bs-body-font-size: 0.9375rem; --bs-body-line-height: 1.65; /* Border radius — tight industrial feel */ --bs-border-radius: 0.25rem; --bs-border-radius-sm: 0.125rem; --bs-border-radius-lg: 0.5rem; /* === VWA CUSTOM TOKENS (not in Bootstrap) === */ --vwa-brass: #c9a961; --vwa-brass-300: #e2cc93; /* AAA hover bg: 8.91:1 on navy */ --vwa-brass-600: #a88b4b; --vwa-brass-800: #665226; --vwa-navy: #0a1f2e; --vwa-midnight: #06151f; /* deepest dark surface (top-bar, footer, breadcrumb-strip.on-dark) */ --vwa-porcelain: #fafaf7; /* light surface */ --vwa-input-border: #6b7a85; /* §1.4.11 AAA-UI: 4.42:1 */ } /* === BODY DEFAULTS — defensive colour cascade === */ body { background-color: #ffffff; color: #0a1f2e; } /* === HEADINGS — Barlow Condensed === */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; color: var(--vwa-navy); } /* === LINKS — underlined navy with brass-800 hover (AAA 7.50:1) === */ a { color: var(--vwa-navy); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--vwa-brass-800); /* AAA: 7.50:1 */ text-decoration: underline; } /* === BUTTONS — industrial-condensed type + 44px AAA target size (§2.5.8) === */ .btn { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0.6875rem 1.25rem; border-radius: var(--bs-border-radius); transition: all 0.18s ease; } .btn-primary { --bs-btn-bg: var(--vwa-navy); --bs-btn-border-color: var(--vwa-navy); --bs-btn-hover-bg: #091b29; --bs-btn-hover-border-color: #091b29; --bs-btn-active-bg: #071724; } .btn-secondary { --bs-btn-color: var(--vwa-navy); --bs-btn-bg: var(--vwa-brass); --bs-btn-border-color: var(--vwa-brass); --bs-btn-hover-color: var(--vwa-navy); --bs-btn-hover-bg: #e2cc93; --bs-btn-hover-border-color: #e2cc93; --bs-btn-active-color: var(--vwa-navy); --bs-btn-active-bg: #f0e3bf; --bs-btn-active-border-color: #f0e3bf; } .btn-outline-light { --bs-btn-color: #ffffff; --bs-btn-border-color: rgba(255, 255, 255, 0.35); --bs-btn-hover-color: var(--vwa-brass); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--vwa-brass); } .btn-outline-dark { --bs-btn-color: var(--vwa-navy); --bs-btn-border-color: var(--vwa-navy); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--vwa-navy); --bs-btn-hover-border-color: var(--vwa-navy); } /* === FORMS — borders + focus state === */ .form-control { border-color: var(--vwa-input-border); font-size: 0.875rem; padding: 0.6875rem 0.875rem; } .form-control:focus { border-color: var(--vwa-navy); box-shadow: 0 0 0 0.2rem rgba(10, 31, 46, 0.1); } .form-label { font-weight: 600; font-size: 0.75rem; color: var(--bs-secondary-color); margin-bottom: 0.375rem; } /* === TEXT UTILITIES — custom utility (no Bootstrap equivalent) === */ .text-technical { font-family: var(--bs-font-monospace); font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--bs-tertiary-color); text-transform: uppercase; } /* === FOCUS RING SYSTEM (AAA §2.4.13 — applies globally) === */ *:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--vwa-navy); } .top-bar *:focus-visible, .navbar-vwa *:focus-visible, .footer *:focus-visible { box-shadow: 0 0 0 2px var(--vwa-navy), 0 0 0 5px var(--vwa-brass); }