/* ══════════════════════════════════════════════════════════════ HARBOR & EMBER — Complete Design System Tokens SignumCyber Platform · Single Source of Truth 306+ tokens · 6 core hues · 23 color categories · 10 structural USAGE: - Import this file FIRST, before all other stylesheets - Toggle dark mode by setting data-theme="dark" on or - Never hardcode hex/px values in component CSS — always use var(--token-name) STRUCTURE: 1. Font Loading 2. Light Mode Tokens (default in :root) 3. Dark Mode Overrides 4. Global Utilities (scrollbar, selection, print, reduced motion) 5. Global Reset & Base Styles ══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════ 1. FONT LOADING — Geist ═══════════════════════════════════════════════ */ /* Google Fonts — primary source */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap'); /* Fontsource CDN — fallback (variable font, all weights in one file) */ @font-face { font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Static weight fallbacks for browsers without variable font support */ @font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 400; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 500; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 600; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 700; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-700-normal.woff2) format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 800; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-800-normal.woff2) format('woff2'); } /* ═══════════════════════════════════════════════ 2. LIGHT MODE TOKENS (default) ═══════════════════════════════════════════════ */ :root { /* ── Fonts ── */ --font-family: 'Geist', 'Geist Variable', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', monospace; /* ═══════════════════════════════════════════════ COLOR SCALES — 6 Core Hues × 10 Steps = 60 Stops ═══════════════════════════════════════════════ */ /* Harbor Blue — Primary · Trust · Navigation · Information */ --harbor-50: #EFF4FB; --harbor-100: #DCEAF7; --harbor-200: #B8D4EF; --harbor-300: #85B5E2; --harbor-400: #5292D0; --harbor-500: #2C5282; --harbor-600: #24456E; --harbor-700: #1D3A5E; --harbor-800: #162D4A; --harbor-900: #0F1F33; /* Burnished Amber — Brand · Action · CTA */ --amber-50: #FEF7ED; --amber-100: #FDECD4; --amber-200: #FAD5A3; --amber-300: #F6B96A; --amber-400: #F0941A; /* ← Ember Spark */ --amber-500: #D97B1A; --amber-600: #B86515; --amber-700: #954F11; --amber-800: #723C0E; --amber-900: #4E2A0B; --gold-rgb: 217, 123, 26; /* Evergreen — Success · Completion · Progress · Health */ --evergreen-50: #ECFDF5; --evergreen-100: #D1FAE5; --evergreen-200: #A7F3D0; --evergreen-300: #6EE7B7; --evergreen-400: #34D399; --evergreen-500: #278A6C; --evergreen-600: #1F7359; --evergreen-700: #185C47; --evergreen-800: #124536; --evergreen-900: #0C2E24; /* Indigo — Secondary Cool · Governance · Chart Accent */ --indigo-50: #EEF2FF; --indigo-100: #E0E7FF; --indigo-200: #C7D2FE; --indigo-300: #A5B4FC; --indigo-400: #818CF8; --indigo-500: #6366F1; --indigo-600: #4F46E5; --indigo-700: #4338CA; --indigo-800: #3730A3; --indigo-900: #312E81; /* Rose — Destructive · Alert · Attention (non-severity) */ --rose-50: #FFF1F2; --rose-100: #FFE4E6; --rose-200: #FECDD3; --rose-300: #FDA4AF; --rose-400: #FB7185; --rose-500: #E11D48; --rose-600: #BE123C; --rose-700: #9F1239; --rose-800: #881337; --rose-900: #4C0519; /* Storm Slate — Neutral Foundation · Backgrounds · Text · Borders */ --slate-50: #F5F7FA; --slate-100: #EDF0F5; --slate-200: #E2E7EF; --slate-300: #CDD5E0; --slate-400: #9DAAB8; --slate-500: #6B7A8D; --slate-600: #4F5D6E; --slate-700: #3A4554; --slate-800: #252E3A; --slate-900: #141B24; /* Alias */ --ember-spark: var(--amber-400); /* ═══════════════════════════════════════════════ STRUCTURAL TOKENS ═══════════════════════════════════════════════ */ /* Border Width */ --border-thin: 1px; --border-medium: 1.5px; --border-thick: 2px; --border-heavy: 3px; /* Border Radius */ --radius-2: 2px; --radius-xs: 3px; --radius-4: 4px; --radius-sm: 5px; --radius-6: 6px; --radius-md: 7px; --radius-8: 8px; --radius-lg: 10px; --radius-12: 12px; --radius-xl: 14px; --radius-full: 9999px; /* Spacing (4px base) */ --space-0: 0px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Layout dimensions */ --slim-header-height: 60px; --page-content-padding: var(--space-6); /* 24px — inner padding for page-level containers */ /* Typography */ --text-xs: 0.6875rem; --text-xs-plus: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-md-plus: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.75rem; --text-3xl: 2rem; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.3px; --tracking-normal: 0; --tracking-wide: 0.8px; /* Shadows (light mode) */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --shadow-xl: 0 20px 60px rgba(0,0,0,0.16); --shadow-glow-amber: 0 0 12px rgba(240,148,26,0.5); --shadow-glow-harbor: 0 0 0 3px rgba(44,82,130,0.12); /* Z-Index — Bootstrap-compatible tier system */ --z-base: 0; --z-dropdown: 1000; /* Bootstrap $zindex-dropdown */ --z-sticky: 1020; /* Bootstrap $zindex-sticky */ --z-sidebar: 1030; /* Bootstrap $zindex-fixed */ --z-modal-backdrop: 1040; /* Bootstrap $zindex-modal-backdrop */ --z-modal: 1050; /* Bootstrap $zindex-modal */ --z-popover: 1060; /* Bootstrap $zindex-popover */ --z-tooltip: 1070; /* Bootstrap $zindex-tooltip */ --z-toast: 2000; /* Above all standard Bootstrap UI */ --z-walkthrough: 9000; /* Tutorial/walkthrough overlays */ --z-lumi: 10000; /* Lumi floating menu (topmost) */ /* Transitions */ --transition-fast: 0.1s ease; --transition-base: 0.15s ease; --transition-medium: 0.2s ease; --transition-slow: 0.3s ease; --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --sidebar-width: 220px; --sidebar-expanded: 260px; --topbar-height: 48px; --content-max: 1400px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* Icon Sizing */ --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 48px; /* Images & Media */ --avatar-sm: 28px; --avatar-md: 36px; --avatar-lg: 64px; --logo-height-nav: 28px; --logo-height-auth: 48px; /* ═══════════════════════════════════════════════ COMPONENT COLOR TOKENS — LIGHT MODE (Default) ═══════════════════════════════════════════════ */ /* 1. Buttons */ --btn-primary-bg: #D97B1A; --btn-primary-hover: #B86515; --btn-primary-text: #FFFFFF; --btn-primary-shadow: rgba(217,123,26,0.25); --btn-secondary-bg: transparent; --btn-secondary-border: #CDD5E0; --btn-secondary-text: #3A4554; --btn-secondary-hover: #F5F7FA; --btn-danger-bg: #E11D48; --btn-danger-hover: #BE123C; --btn-danger-text: #FFFFFF; --btn-success-bg: #278A6C; --btn-success-hover: #1F7359; --btn-success-text: #FFFFFF; --btn-warning-bg: #D97B1A; --btn-warning-hover: #C26A14; --btn-warning-text: #FFFFFF; --btn-harbor-bg: #2C5282; --btn-harbor-hover: #24456E; --btn-harbor-text: #FFFFFF; --btn-ghost-text: #2C5282; --btn-ghost-hover: #EFF4FB; --btn-disabled-bg: #EDF0F5; --btn-disabled-text: #9DAAB8; --btn-focus-ring: rgba(44,82,130,0.3); /* 2. Toggles & Switches */ --toggle-active-bg: #2C5282; --toggle-active-thumb: #FFFFFF; --toggle-inactive-bg: #CDD5E0; --toggle-inactive-thumb: #FFFFFF; --toggle-hover-ring: #DCEAF7; --checkbox-checked: #2C5282; --checkbox-border: #CDD5E0; --radio-active: #2C5282; /* 3. Table Headers & Rows */ --table-header-bg: #F5F7FA; --table-header-text: #6B7A8D; --table-header-border: #E2E7EF; --table-row-bg: #FFFFFF; --table-row-stripe: #FAFBFC; --table-row-hover: #F7FAFD; --table-row-selected: #EFF4FB; --table-cell-border: #EDF0F5; --table-sort-icon: #9DAAB8; --table-sort-active: #2C5282; /* 4. Cards & Surfaces */ --card-bg: #FFFFFF; --card-bg-elevated: #FFFFFF; --card-border: #E2E7EF; --card-border-hover: #CDD5E0; --card-shadow: 0 1px 3px rgba(0,0,0,0.06); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08); --surface-page: #F5F7FA; --surface-sunken: #EDF0F5; --surface-overlay: rgba(255,255,255,0.8); --surface-scrim: rgba(0,0,0,0.4); /* 5. Pill Badges */ --badge-harbor-bg: #EFF4FB; --badge-harbor-text: #1D3A5E; --badge-harbor-border: #B8D4EF; --badge-amber-bg: #FEF7ED; --badge-amber-text: #954F11; --badge-green-bg: #ECFDF5; --badge-green-text: #185C47; --badge-indigo-bg: #EEF2FF; --badge-indigo-text: #4338CA; --badge-rose-bg: #FFF1F2; --badge-rose-text: #9F1239; --badge-neutral-bg: #EDF0F5; --badge-neutral-text: #6B7A8D; /* 6. Icons */ --icon-default: #6B7A8D; --icon-muted: #9DAAB8; --icon-brand: #B86515; --icon-info: #2C5282; --icon-success: #278A6C; --icon-warning: #D97B1A; --icon-danger: #E11D48; --icon-governance: #6366F1; /* 7. Progress & Loading */ --progress-track: #EDF0F5; --progress-default: #2C5282; --progress-brand-start: #D97B1A; --progress-brand-end: #F0941A; --progress-success: #278A6C; --progress-warning: #D97B1A; --progress-danger: #E11D48; --skeleton-base: #EDF0F5; --skeleton-shimmer: #E2E7EF; /* 8. Breadcrumbs & Tabs */ --breadcrumb-text: #6B7A8D; --breadcrumb-active: #252E3A; --breadcrumb-sep: #CDD5E0; --tab-inactive: #6B7A8D; --tab-active-text: #24456E; --tab-active-border: #2C5282; --tab-hover-bg: #F5F7FA; --tab-hover-text: #3A4554; /* 9. Tooltips & Popovers */ --tooltip-bg: #252E3A; --tooltip-text: #FFFFFF; --tooltip-border: #3A4554; --popover-bg: #FFFFFF; --popover-border: #E2E7EF; --popover-shadow: 0 8px 30px rgba(0,0,0,0.12); /* 10. Dropdowns & Select */ --select-bg: #FFFFFF; --select-border: #CDD5E0; --select-focus: #2C5282; --select-text: #252E3A; --select-placeholder: #9DAAB8; --select-chevron: #9DAAB8; --option-hover: #EFF4FB; --option-selected-bg: #EFF4FB; --option-selected-text: #1D3A5E; /* 11. Form States — Full Lifecycle */ --input-bg: #FFFFFF; --input-border: #CDD5E0; --input-text: #1C2A3A; --input-placeholder: #9DAAB8; --input-focus-border: #2C5282; --input-focus-ring: rgba(44,82,130,0.12); --input-error-border: #E11D48; --input-error-ring: rgba(225,29,72,0.08); --input-error-text: #E11D48; --input-error-icon: #E11D48; --input-success-border: #278A6C; --input-success-icon: #278A6C; --input-disabled-bg: #EDF0F5; --input-disabled-border: #E2E7EF; --input-disabled-text: #9DAAB8; --input-readonly-bg: transparent; --input-readonly-border: #CDD5E0; --input-label: #3A4554; /* 12. Alerts & Notifications */ --alert-info-bg: #EFF4FB; --alert-info-border: #B8D4EF; --alert-info-text: #1D3A5E; --alert-info-icon: #2C5282; --alert-success-bg: #ECFDF5; --alert-success-border: #A7F3D0; --alert-success-text: #185C47; --alert-success-icon: #278A6C; --alert-warning-bg: #FEF7ED; --alert-warning-border: #FAD5A3; --alert-warning-text: #954F11; --alert-warning-icon: #D97B1A; --alert-error-bg: #FFF1F2; --alert-error-border: #FECDD3; --alert-error-text: #9F1239; --alert-error-icon: #E11D48; --toast-bg: #252E3A; --toast-text: #FFFFFF; --toast-shadow: 0 8px 30px rgba(0,0,0,0.15); --toast-success-accent: #278A6C; --toast-error-accent: #E11D48; --toast-info-accent: #2C5282; /* 13. Sidebar & Navigation */ --nav-bg: #FFFFFF; --nav-border: #E2E7EF; --nav-item-text: #6B7A8D; --nav-item-link-text: #4F46E5; --nav-item-hover-bg: #F5F7FA; --nav-item-hover-text: #1C2A3A; --nav-item-active-bg: #EFF4FB; --nav-item-active-text: #24456E; --nav-item-active-bar: #2C5282; --nav-sidebar-hover-bg: rgba(79, 70, 229, 0.06); --nav-sidebar-hover-text: #4338CA; --nav-sidebar-active-bg: #EEF2FF; --nav-sidebar-active-text: #4338CA; --nav-sidebar-active-bar: #4F46E5; --nav-section-label: #9DAAB8; --nav-search-bg: #F5F7FA; --nav-search-border: #E2E7EF; --nav-lumi-bg: rgba(240,148,26,0.04); --nav-lumi-border: rgba(240,148,26,0.12); --nav-count-badge: #E11D48; /* 14. Modal & Dialog */ --modal-bg: #FFFFFF; --modal-border: #E2E7EF; --modal-shadow: 0 20px 60px rgba(0,0,0,0.15); --modal-scrim: rgba(0,0,0,0.4); --modal-header-border: #E2E7EF; --modal-footer-bg: #F5F7FA; --modal-close-color: #9DAAB8; --modal-close-hover: #3A4554; --modal-sm-width: 400px; --modal-md-width: 560px; --modal-lg-width: 800px; --modal-xl-width: 1100px; /* 15. Inline Text Links */ --link-text: #2C5282; --link-underline: rgba(44,82,130,0.35); --link-hover-text: #1D3A5E; --link-hover-underline: rgba(44,82,130,0.7); --link-visited: #6366F1; --link-underline-offset: 2px; /* 16. Empty & Loading States */ --empty-icon-color: #CDD5E0; --empty-title-color: #3A4554; --empty-desc-color: #6B7A8D; --empty-border: #CDD5E0; --empty-border-style: dashed; --spinner-color: #D97B1A; --spinner-track: #E2E7EF; --error-page-bg: #FFF1F2; /* 17. Questionnaire Components */ --q-section-header-bg: #EFF4FB; --q-section-header-text: #24456E; --q-section-closed-bg: #FFFFFF; --q-section-chevron: #9DAAB8; --q-progress-track: #E2E7EF; --q-progress-fill: #D97B1A; --q-answered-dot: #278A6C; --q-answered-icon: #FFFFFF; --q-unanswered-border: #CDD5E0; --q-skipped-bg: #E2E7EF; --q-skipped-text: #9DAAB8; --q-conditional-border: #C7D2FE; --q-help-bg: #EEF2FF; --q-help-text: #4338CA; /* 18. Score & Metric Display */ --score-critical-text: #991b1b; --score-critical-bg: #fef2f2; --score-high-text: #dc2626; --score-high-bg: #fef2f2; --score-medium-text: #ca8a04; --score-medium-bg: #fffbeb; --score-good-text: #1F7359; --score-good-bg: #ECFDF5; --score-low-text: #1F7359; --score-low-bg: #ECFDF5; --score-critical-border: #fecaca; --score-high-border: #fecaca; --score-medium-border: #fde68a; --score-low-border: #a7f3d0; --score-font-size: 1.75rem; --score-font-weight: 800; /* 19. Data Visualization */ --chart-axis-label: #6B7A8D; --chart-axis-line: #E2E7EF; --chart-gridline: rgba(226,231,239,0.5); --chart-tooltip-bg: #252E3A; --chart-tooltip-text: #FFFFFF; --chart-threshold-line: #E11D48; --chart-threshold-dash: 4 4; --chart-legend-text: #6B7A8D; /* 20. Lumi AI Language */ --lumi-bubble-bg: rgba(240,148,26,0.06); --lumi-bubble-border: rgba(240,148,26,0.15); --lumi-user-bg: #EFF4FB; --lumi-user-border: #B8D4EF; --lumi-glow: 0 0 12px rgba(240,148,26,0.4); --lumi-thinking-dot: #D97B1A; --lumi-avatar-size: 32px; --lumi-chip-bg: #EFF4FB; --lumi-chip-border: #B8D4EF; --lumi-chip-text: #2C5282; /* 21. Scrollbar & Selection */ --scrollbar-track: transparent; --scrollbar-thumb: #CDD5E0; --selection-bg: rgba(44,82,130,0.15); --selection-text: inherit; /* 22. Print & PDF Export */ --print-text: #1C2A3A; --print-bg: #FFFFFF; --print-border: #CDD5E0; --print-badge-bg: transparent; --print-badge-border: #CDD5E0; --print-accent: #24456E; /* 23. Severity Scale (Thermal — NO GREEN for Low) */ --severity-critical-text: #991b1b; --severity-critical-bg: #fef2f2; --severity-critical-border: #fecaca; --severity-high-text: #dc2626; --severity-high-bg: #fef2f2; --severity-high-border: #fecaca; --severity-medium-text: #ca8a04; --severity-medium-bg: #fffbeb; --severity-medium-border: #fde68a; --severity-low-text: #2a7c9e; --severity-low-bg: #edf6fa; --severity-low-border: #b3d8e8; /* 24. Status Scale */ --status-complete-text: #16a34a; --status-complete-bg: #f0fdf4; --status-complete-border: #bbf7d0; --status-progress-text: #2563eb; --status-progress-bg: #eff6ff; --status-progress-border: #bfdbfe; --status-pending-text: #64748b; --status-pending-bg: #f8fafc; --status-pending-border: #e2e8f0; --status-atrisk-text: #d97706; --status-atrisk-bg: #fffbeb; --status-atrisk-border: #fde68a; --status-blocked-text: #dc2626; --status-blocked-bg: #fef2f2; --status-blocked-border: #fecaca; /* 25. Training Module */ --training-accent: #6c5ce7; --training-accent-bg: rgba(108, 92, 231, 0.08); --training-accent-hover: rgba(108, 92, 231, 0.15); --training-btn-bg: #6c5ce7; --training-btn-hover: #5a4bd6; --training-btn-text: #FFFFFF; /* ═══════════════════════════════════════════════ 26. COMPATIBILITY ALIASES (Essentials shim) ═══════════════════════════════════════════════ Several component stylesheets and JS-injected styles reference token names from an older/foreign palette (--bg-primary, --text-primary, --accent-primary, --surface-default, and a --token-* namespace) that are NOT defined above. Each use is written as `var(--name, #lighthex)`, so the hardcoded LIGHT fallback always won and the surface never switched for [data-theme="dark"] — e.g. Asset Inventory / Lumi metric cards and notification popups rendered white-on-dark. Aliasing each to a real token (which carries its own dark value) fixes both themes globally with no change to the light-mode appearance. Consumers: asset-inventory.css, lumi-analytics.css, notifications.js, artifacts/ra-wizard.js. TODO: migrate consumers to the real token names and delete this block. */ /* Generic namespace */ --bg-primary: var(--card-bg); --bg-secondary: var(--surface-sunken); --bg-tertiary: var(--progress-track); --bg-hover: var(--table-row-hover); --bg-info: var(--alert-info-bg); --surface-default: var(--card-bg); --surface-secondary: var(--surface-sunken); --text-primary: var(--input-text); --text-secondary: var(--icon-default); --text-tertiary: var(--icon-muted); --text-muted: var(--icon-default); --accent-primary: var(--icon-info); --border-primary: var(--card-border); --border-default: var(--card-border); --border-color: var(--card-border); --callout-warning-bg: var(--alert-warning-bg); /* --token-* namespace (asset-inventory.css) */ --token-bg-secondary: var(--surface-sunken); --token-bg-hover: var(--table-row-hover); --token-bg-info: var(--alert-info-bg); --token-bg-success: var(--alert-success-bg); --token-bg-warning: var(--alert-warning-bg); --token-border-default: var(--card-border); --token-border-info: var(--alert-info-border); --token-border-success: var(--alert-success-border); --token-border-warning: var(--alert-warning-border); --token-text-primary: var(--input-text); --token-text-secondary: var(--icon-default); --token-text-tertiary: var(--icon-muted); --token-accent: var(--icon-info); } /* ═══════════════════════════════════════════════ 3. DARK MODE OVERRIDES ═══════════════════════════════════════════════ */ [data-theme="dark"] { /* Shadow overrides */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 30px rgba(0,0,0,0.5); --shadow-xl: 0 20px 60px rgba(0,0,0,0.5); /* 1. Buttons */ --btn-primary-bg: #D97B1A; --btn-primary-hover: #F0941A; --btn-primary-text: #FFFFFF; --btn-primary-shadow: rgba(240,148,26,0.2); --btn-secondary-bg: transparent; --btn-secondary-border: #4F5D6E; --btn-secondary-text: #E2E7EF; --btn-secondary-hover: #252E3A; --btn-danger-bg: #BE123C; --btn-danger-hover: #E11D48; --btn-danger-text: #FFFFFF; --btn-success-bg: #1F7359; --btn-success-hover: #278A6C; --btn-success-text: #FFFFFF; --btn-warning-bg: #C26A14; --btn-warning-hover: #D97B1A; --btn-warning-text: #FFFFFF; --btn-harbor-bg: #24456E; --btn-harbor-hover: #2C5282; --btn-harbor-text: #FFFFFF; --btn-ghost-text: #85B5E2; --btn-ghost-hover: #0F1F33; --btn-disabled-bg: #252E3A; --btn-disabled-text: #4F5D6E; --btn-focus-ring: rgba(82,146,208,0.3); /* 2. Toggles & Switches */ --toggle-active-bg: #5292D0; --toggle-active-thumb: #FFFFFF; --toggle-inactive-bg: #3A4554; --toggle-inactive-thumb: #9DAAB8; --toggle-hover-ring: #162D4A; --checkbox-checked: #5292D0; --checkbox-border: #4F5D6E; --radio-active: #5292D0; /* 3. Table Headers & Rows */ --table-header-bg: #141B24; --table-header-text: #9DAAB8; --table-header-border: #3A4554; --table-row-bg: #1A2230; --table-row-stripe: #161D27; --table-row-hover: rgba(15,31,51,0.4); --table-row-selected: rgba(15,31,51,0.6); --table-cell-border: #252E3A; --table-sort-icon: #6B7A8D; --table-sort-active: #85B5E2; /* 4. Cards & Surfaces */ --card-bg: #1A2230; --card-bg-elevated: #252E3A; --card-border: #3A4554; --card-border-hover: #4F5D6E; --card-shadow: 0 1px 3px rgba(0,0,0,0.3); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); --surface-page: #0E1521; --surface-sunken: #141B24; --surface-overlay: rgba(26,34,48,0.9); --surface-scrim: rgba(0,0,0,0.6); /* 5. Pill Badges */ --badge-harbor-bg: #0F1F33; --badge-harbor-text: #B8D4EF; --badge-harbor-border: #1D3A5E; --badge-amber-bg: rgba(78,42,11,0.6); --badge-amber-text: #FAD5A3; --badge-green-bg: rgba(12,46,36,0.6); --badge-green-text: #A7F3D0; --badge-indigo-bg: rgba(49,46,129,0.6); --badge-indigo-text: #C7D2FE; --badge-rose-bg: rgba(76,5,25,0.6); --badge-rose-text: #FECDD3; --badge-neutral-bg: #252E3A; --badge-neutral-text: #9DAAB8; /* 6. Icons */ --icon-default: #9DAAB8; --icon-muted: #4F5D6E; --icon-brand: #F0941A; --icon-info: #85B5E2; --icon-success: #34D399; --icon-warning: #F6B96A; --icon-danger: #FB7185; --icon-governance: #818CF8; /* 7. Progress & Loading */ --progress-track: #252E3A; --progress-default: #5292D0; --progress-brand-start: #D97B1A; --progress-brand-end: #F6B96A; --progress-success: #34D399; --progress-warning: #F6B96A; --progress-danger: #FB7185; --skeleton-base: #252E3A; --skeleton-shimmer: #3A4554; /* 8. Breadcrumbs & Tabs */ --breadcrumb-text: #9DAAB8; --breadcrumb-active: #EDF0F5; --breadcrumb-sep: #4F5D6E; --tab-inactive: #9DAAB8; --tab-active-text: #85B5E2; --tab-active-border: #5292D0; --tab-hover-bg: #252E3A; --tab-hover-text: #E2E7EF; /* 9. Tooltips & Popovers */ --tooltip-bg: #EDF0F5; --tooltip-text: #141B24; --tooltip-border: #E2E7EF; --popover-bg: #252E3A; --popover-border: #3A4554; --popover-shadow: 0 8px 30px rgba(0,0,0,0.5); /* 10. Dropdowns & Select */ --select-bg: #252E3A; --select-border: #4F5D6E; --select-focus: #5292D0; --select-text: #EDF0F5; --select-placeholder: #6B7A8D; --select-chevron: #6B7A8D; --option-hover: #0F1F33; --option-selected-bg: #162D4A; --option-selected-text: #B8D4EF; /* 11. Form States */ --input-bg: #252E3A; --input-border: #4F5D6E; --input-text: #E8EDF3; --input-placeholder: #6B7A8D; --input-focus-border: #5292D0; --input-focus-ring: rgba(82,146,208,0.15); --input-error-border: #FB7185; --input-error-ring: rgba(225,29,72,0.15); --input-error-text: #FB7185; --input-error-icon: #FB7185; --input-success-border: #34D399; --input-success-icon: #34D399; --input-disabled-bg: #141B24; --input-disabled-border: #252E3A; --input-disabled-text: #4F5D6E; --input-readonly-bg: transparent; --input-readonly-border: #3A4554; --input-label: #CDD5E0; /* 12. Alerts & Notifications */ --alert-info-bg: rgba(44,82,130,0.1); --alert-info-border: rgba(44,82,130,0.25); --alert-info-text: #85B5E2; --alert-info-icon: #5292D0; --alert-success-bg: rgba(39,138,108,0.1); --alert-success-border: rgba(39,138,108,0.25); --alert-success-text: #6EE7B7; --alert-success-icon: #34D399; --alert-warning-bg: rgba(217,123,26,0.1); --alert-warning-border: rgba(217,123,26,0.25); --alert-warning-text: #F6B96A; --alert-warning-icon: #F0941A; --alert-error-bg: rgba(225,29,72,0.1); --alert-error-border: rgba(225,29,72,0.25); --alert-error-text: #FDA4AF; --alert-error-icon: #FB7185; --toast-bg: #EDF0F5; --toast-text: #141B24; --toast-shadow: 0 8px 30px rgba(0,0,0,0.4); --toast-success-accent: #34D399; --toast-error-accent: #FB7185; --toast-info-accent: #5292D0; /* 13. Sidebar & Navigation */ --nav-bg: #161E2A; --nav-border: #252E3A; --nav-item-text: #9DAAB8; --nav-item-link-text: #A5B4FC; --nav-item-hover-bg: rgba(255,255,255,0.03); --nav-item-hover-text: #E8EDF3; --nav-item-active-bg: #0F1F33; --nav-item-active-text: #B8D4EF; --nav-item-active-bar: #5292D0; --nav-sidebar-hover-bg: rgba(165, 180, 252, 0.08); --nav-sidebar-hover-text: #C7D2FE; --nav-sidebar-active-bg: rgba(79, 70, 229, 0.12); --nav-sidebar-active-text: #C7D2FE; --nav-sidebar-active-bar: #818CF8; --nav-section-label: #4F5D6E; --nav-search-bg: #252E3A; --nav-search-border: #3A4554; --nav-lumi-bg: rgba(240,148,26,0.06); --nav-lumi-border: rgba(240,148,26,0.15); --nav-count-badge: #FB7185; /* 14. Modal & Dialog */ --modal-bg: #252E3A; --modal-border: #3A4554; --modal-shadow: 0 20px 60px rgba(0,0,0,0.5); --modal-scrim: rgba(0,0,0,0.6); --modal-header-border: #3A4554; --modal-footer-bg: #1A2230; --modal-close-color: #6B7A8D; --modal-close-hover: #CDD5E0; /* 15. Inline Text Links */ --link-text: #85B5E2; --link-underline: rgba(133,181,226,0.35); --link-hover-text: #B8D4EF; --link-hover-underline: rgba(133,181,226,0.7); --link-visited: #A5B4FC; /* 16. Empty & Loading States */ --empty-icon-color: #3A4554; --empty-title-color: #CDD5E0; --empty-desc-color: #9DAAB8; --empty-border: #3A4554; --skeleton-base: #252E3A; --skeleton-shimmer: #3A4554; --spinner-color: #F0941A; --spinner-track: #3A4554; --error-page-bg: rgba(225,29,72,0.06); /* 17. Questionnaire Components */ --q-section-header-bg: #0F1F33; --q-section-header-text: #B8D4EF; --q-section-closed-bg: #1A2230; --q-section-chevron: #6B7A8D; --q-progress-track: #3A4554; --q-progress-fill: #F0941A; --q-answered-dot: #34D399; --q-answered-icon: #FFFFFF; --q-unanswered-border: #4F5D6E; --q-skipped-bg: #3A4554; --q-skipped-text: #6B7A8D; --q-conditional-border: #4338CA; --q-help-bg: rgba(99,102,241,0.08); --q-help-text: #A5B4FC; /* 18. Score & Metric Display */ --score-critical-text: #fca5a5; --score-critical-bg: rgba(220,38,38,0.1); --score-high-text: #f87171; --score-high-bg: rgba(220,38,38,0.08); --score-medium-text: #fcd34d; --score-medium-bg: rgba(202,138,4,0.1); --score-good-text: #34D399; --score-good-bg: rgba(39,138,108,0.1); --score-low-text: #34D399; --score-low-bg: rgba(39,138,108,0.1); --score-critical-border: rgba(220,38,38,0.3); --score-high-border: rgba(220,38,38,0.25); --score-medium-border: rgba(202,138,4,0.25); --score-low-border: rgba(39,138,108,0.25); /* 19. Data Visualization */ --chart-axis-label: #9DAAB8; --chart-axis-line: #3A4554; --chart-gridline: rgba(58,69,84,0.5); --chart-tooltip-bg: #EDF0F5; --chart-tooltip-text: #141B24; --chart-threshold-line: #FB7185; --chart-legend-text: #CDD5E0; /* 20. Lumi AI Language */ --lumi-bubble-bg: rgba(240,148,26,0.08); --lumi-bubble-border: rgba(240,148,26,0.2); --lumi-user-bg: #162D4A; --lumi-user-border: #1D3A5E; --lumi-glow: 0 0 16px rgba(240,148,26,0.5); --lumi-thinking-dot: #F0941A; --lumi-chip-bg: #162D4A; --lumi-chip-border: #1D3A5E; --lumi-chip-text: #85B5E2; /* 21. Scrollbar & Selection */ --scrollbar-thumb: #3A4554; --selection-bg: rgba(82,146,208,0.25); /* 23. Severity Scale */ --severity-critical-text: #fca5a5; --severity-critical-bg: rgba(220,38,38,0.12); --severity-critical-border: rgba(220,38,38,0.3); --severity-high-text: #f87171; --severity-high-bg: rgba(220,38,38,0.1); --severity-high-border: rgba(220,38,38,0.25); --severity-medium-text: #fcd34d; --severity-medium-bg: rgba(202,138,4,0.1); --severity-medium-border: rgba(202,138,4,0.25); --severity-low-text: #6cc5dd; --severity-low-bg: rgba(42,124,158,0.1); --severity-low-border: rgba(42,124,158,0.25); /* 24. Status Scale */ --status-complete-text: #4ade80; --status-complete-bg: rgba(22,163,74,0.1); --status-complete-border: rgba(22,163,74,0.25); --status-progress-text: #60a5fa; --status-progress-bg: rgba(37,99,235,0.1); --status-progress-border: rgba(37,99,235,0.25); --status-pending-text: #94a3b8; --status-pending-bg: rgba(148,163,184,0.08); --status-pending-border: rgba(148,163,184,0.2); --status-atrisk-text: #fbbf24; --status-atrisk-bg: rgba(217,119,6,0.1); --status-atrisk-border: rgba(217,119,6,0.25); --status-blocked-text: #f87171; --status-blocked-bg: rgba(220,38,38,0.1); --status-blocked-border: rgba(220,38,38,0.25); /* 25. Training Module */ --training-accent: #a29bfe; --training-accent-bg: rgba(162, 155, 254, 0.1); --training-accent-hover: rgba(162, 155, 254, 0.15); --training-btn-bg: #5a4bd6; --training-btn-hover: #6c5ce7; --training-btn-text: #FFFFFF; } /* ═══════════════════════════════════════════════ 4. GLOBAL UTILITIES ═══════════════════════════════════════════════ */ /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { opacity: 0.8; } /* Selection */ ::selection { background: var(--selection-bg); color: var(--selection-text); } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Print */ @media print { * { color: var(--print-text) !important; background: var(--print-bg) !important; box-shadow: none !important; text-shadow: none !important; } [class*="badge"], [class*="pill"] { background: var(--print-badge-bg) !important; border: var(--border-thin) solid var(--print-badge-border) !important; } h1, h2, h3 { color: var(--print-accent) !important; } } /* ═══════════════════════════════════════════════ 5. GLOBAL RESET & BASE STYLES ═══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-family); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-normal); color: var(--input-text); background: var(--surface-page); margin: 0; padding: 0; transition: background-color var(--transition-slow), color var(--transition-slow); } /* All headings inherit Geist */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); color: var(--input-text); margin: 0; } h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); } h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); } h3 { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); } h4 { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-normal); } /* Links */ a { color: var(--link-text); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: var(--link-underline-offset); transition: all var(--transition-fast); } a:hover { color: var(--link-hover-text); text-decoration-color: var(--link-hover-underline); } a:visited { color: var(--link-visited); } /* Focus */ *:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }