/* ========================================================================== Mission Control Design System - Design Tokens Version: 2.0.0 Description: 3-Layer token architecture for IntelliWiz Mission Control Architecture: Layer 1 (Primitive) — Raw color/size values, NEVER used in components Layer 2 (Semantic) — Theme-switchable, used in layouts/utilities Layer 3 (Component) — Component-specific, reference semantic tokens ========================================================================== */ :root { /* ========================================================================== LAYER 1: PRIMITIVE TOKENS Raw values only. Never reference these directly in component CSS. ========================================================================== */ /* Blue scale */ --mc-blue-50: #F0F6FF; --mc-blue-100: #E6F0FF; --mc-blue-200: #DEEBFF; --mc-blue-300: #B3D4FF; --mc-blue-400: #4C9AFF; --mc-blue-500: #0066FF; --mc-blue-600: #0065FF; --mc-blue-700: #0052CC; --mc-blue-800: #003D99; --mc-blue-900: #002966; /* Green scale */ --mc-green-50: #E3FCEF; --mc-green-100: #ABF5D1; --mc-green-500: #00875A; --mc-green-600: #006644; --mc-green-700: #004D33; /* Orange scale */ --mc-orange-50: #FFF4E5; --mc-orange-100: #FFE2B7; --mc-orange-500: #FF8B00; --mc-orange-600: #E67E00; --mc-orange-700: #B45309; /* Red scale */ --mc-red-50: #FFEBE6; --mc-red-100: #FFBDAD; --mc-red-500: #DE350B; --mc-red-600: #BF2600; --mc-red-700: #991F00; /* Neutral scale (Light) */ --mc-neutral-0: #FFFFFF; --mc-neutral-50: #F4F5F7; --mc-neutral-100: #EBECF0; --mc-neutral-200: #DFE1E6; --mc-neutral-300: #C1C7D0; --mc-neutral-400: #A5ADBA; --mc-neutral-500: #97A0AF; --mc-neutral-600: #6B778C; --mc-neutral-800: #172B4D; --mc-neutral-900: #091E42; /* ========================================================================== LAYER 2: SEMANTIC TOKENS Theme-switchable references to primitives. Used in layouts/utilities. ========================================================================== */ /* Brand */ --mc-primary: var(--mc-blue-500); --mc-primary-hover: var(--mc-blue-700); --mc-primary-active: var(--mc-blue-800); --mc-primary-light: var(--mc-blue-100); --mc-primary-lighter: var(--mc-blue-50); /* Status colors */ --mc-success: var(--mc-green-500); --mc-success-light: var(--mc-green-50); --mc-success-hover: var(--mc-green-600); --mc-warning: var(--mc-orange-500); --mc-warning-light: var(--mc-orange-50); --mc-warning-hover: var(--mc-orange-600); --mc-danger: var(--mc-red-500); --mc-danger-light: var(--mc-red-50); --mc-danger-hover: var(--mc-red-600); --mc-info: var(--mc-blue-600); --mc-info-light: var(--mc-blue-200); --mc-info-hover: var(--mc-blue-700); /* Surfaces */ --mc-bg-page: var(--mc-neutral-50); --mc-bg-primary: var(--mc-neutral-0); --mc-bg-secondary: var(--mc-neutral-50); --mc-bg-tertiary: var(--mc-neutral-100); --mc-bg-elevated: var(--mc-neutral-0); --mc-bg-hover: var(--mc-neutral-50); --mc-bg-active: var(--mc-neutral-100); /* Text */ --mc-text-primary: var(--mc-neutral-800); --mc-text-secondary: var(--mc-neutral-600); --mc-text-tertiary: var(--mc-neutral-500); --mc-text-muted: var(--mc-text-tertiary); --mc-text-disabled: var(--mc-neutral-400); --mc-text-inverse: var(--mc-neutral-0); --mc-text-link: var(--mc-blue-600); /* Borders */ --mc-border: var(--mc-neutral-200); --mc-border-strong: var(--mc-neutral-300); --mc-border-focus: var(--mc-blue-400); /* ========================================================================== KPI & METRICS COLORS ========================================================================== */ --mc-kpi-positive: #00875A; --mc-kpi-positive-bg: #E3FCEF; --mc-kpi-negative: #DE350B; --mc-kpi-negative-bg: #FFEBE6; --mc-kpi-neutral: #6B778C; --mc-kpi-neutral-bg: #F4F5F7; --mc-trend-up: #00875A; --mc-trend-down: #DE350B; --mc-trend-flat: #6B778C; /* Chart colors - 8-color palette for data visualization */ --mc-chart-1: #0066FF; --mc-chart-2: #00875A; --mc-chart-3: #FF8B00; --mc-chart-4: #6554C0; --mc-chart-5: #00B8D9; --mc-chart-6: #FF5630; --mc-chart-7: #36B37E; --mc-chart-8: #6B778C; /* Chart background and text colors (computed at runtime for theme awareness) */ --mc-chart-bg: var(--mc-bg-primary); --mc-chart-panel-bg: var(--mc-bg-secondary); --mc-chart-text-primary: var(--mc-text-primary); --mc-chart-text-secondary: var(--mc-text-secondary); --mc-chart-text-tertiary: var(--mc-text-tertiary); --mc-chart-border: var(--mc-border); --mc-chart-grid: rgba(107, 119, 140, 0.1); /* ========================================================================== ALPHA-AWARE STATUS COLORS (Light Mode) For backgrounds, borders, and soft accents that need themability ========================================================================== */ /* Success (Green) alpha variants */ --mc-success-alpha-5: rgba(0, 135, 90, 0.05); --mc-success-alpha-8: rgba(0, 135, 90, 0.08); --mc-success-alpha-10: rgba(0, 135, 90, 0.10); --mc-success-alpha-15: rgba(0, 135, 90, 0.15); --mc-success-alpha-20: rgba(0, 135, 90, 0.20); --mc-success-text: #00875A; /* Warning (Orange) alpha variants */ --mc-warning-alpha-5: rgba(255, 139, 0, 0.05); --mc-warning-alpha-8: rgba(255, 139, 0, 0.08); --mc-warning-alpha-10: rgba(255, 139, 0, 0.10); --mc-warning-alpha-15: rgba(255, 139, 0, 0.15); --mc-warning-alpha-20: rgba(255, 139, 0, 0.20); --mc-warning-text: #B45309; /* Danger (Red) alpha variants */ --mc-danger-alpha-5: rgba(222, 53, 11, 0.05); --mc-danger-alpha-8: rgba(222, 53, 11, 0.08); --mc-danger-alpha-10: rgba(222, 53, 11, 0.10); --mc-danger-alpha-15: rgba(222, 53, 11, 0.15); --mc-danger-alpha-20: rgba(222, 53, 11, 0.20); --mc-danger-text: #DE350B; /* Info (Blue) alpha variants */ --mc-info-alpha-5: rgba(0, 101, 255, 0.05); --mc-info-alpha-8: rgba(0, 101, 255, 0.08); --mc-info-alpha-10: rgba(0, 101, 255, 0.10); --mc-info-alpha-15: rgba(0, 101, 255, 0.15); --mc-info-alpha-20: rgba(0, 101, 255, 0.20); --mc-info-text: #0052CC; /* Neutral (Gray) alpha variants */ --mc-neutral-alpha-5: rgba(107, 119, 140, 0.05); --mc-neutral-alpha-8: rgba(107, 119, 140, 0.08); --mc-neutral-alpha-10: rgba(107, 119, 140, 0.10); --mc-neutral-alpha-15: rgba(107, 119, 140, 0.15); --mc-neutral-alpha-20: rgba(107, 119, 140, 0.20); /* Primary (Blue) alpha variants - for wizard UI polish */ --mc-primary-alpha-5: rgba(0, 102, 255, 0.05); --mc-primary-alpha-8: rgba(0, 102, 255, 0.08); --mc-primary-alpha-10: rgba(0, 102, 255, 0.10); --mc-primary-alpha-15: rgba(0, 102, 255, 0.15); --mc-primary-alpha-20: rgba(0, 102, 255, 0.20); --mc-primary-alpha-25: rgba(0, 102, 255, 0.25); --mc-primary-alpha-30: rgba(0, 102, 255, 0.30); /* Additional UI polish tokens */ --mc-primary-bg: rgba(0, 102, 255, 0.06); --mc-primary-focus-ring: rgba(0, 102, 255, 0.20); --mc-border-hover: #C1C7D0; /* Gradient backgrounds for operational states */ --mc-gradient-success-subtle: linear-gradient(135deg, #E3FCEF 0%, #ABF5D1 100%); --mc-gradient-warning-subtle: linear-gradient(135deg, #FFF4E5 0%, #FFE2B7 100%); --mc-gradient-danger-subtle: linear-gradient(135deg, #FFEBE6 0%, #FFBDAD 100%); --mc-gradient-info-subtle: linear-gradient(135deg, #DEEBFF 0%, #B3D4FF 100%); /* Overlay and background alpha values */ --mc-overlay-dark: rgba(0, 0, 0, 0.5); --mc-overlay-light: rgba(255, 255, 255, 0.92); --mc-warning-bg-light: rgba(255, 152, 0, 0.1); --mc-danger-bg-light: rgba(220, 53, 69, 0.05); --mc-danger-focus-ring: rgba(220, 53, 69, 0.15); /* ========================================================================== SPACING SCALE (8px base unit) ========================================================================== */ --mc-space-0: 0; --mc-space-0-5: 0.125rem; /* 2px - tight icon gaps, hairline separators */ --mc-space-1: 0.25rem; /* 4px */ --mc-space-1-5: 0.375rem; /* 6px - compact list items, badge padding */ --mc-space-2: 0.5rem; /* 8px */ --mc-space-3: 0.75rem; /* 12px */ --mc-space-4: 1rem; /* 16px */ --mc-space-5: 1.5rem; /* 24px */ --mc-space-6: 2rem; /* 32px */ --mc-space-7: 2.5rem; /* 40px - medium section spacing */ --mc-space-8: 3rem; /* 48px */ --mc-space-9: 3.5rem; /* 56px - large section breaks */ --mc-space-10: 4rem; /* 64px */ --mc-space-12: 6rem; /* 96px */ /* ========================================================================== TYPOGRAPHY ========================================================================== */ --mc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mc-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace; /* Font sizes — fluid scaling across 768px–2560px viewports */ --mc-text-xs: 0.75rem; /* 12px (static — too small for fluid) */ --mc-text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13px–14px */ --mc-text-base: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); /* 14px–16px */ --mc-text-lg: clamp(1rem, 0.93rem + 0.3vw, 1.125rem); /* 16px–18px */ --mc-text-xl: clamp(1.125rem, 1.04rem + 0.4vw, 1.25rem); /* 18px–20px */ --mc-text-2xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 20px–24px */ --mc-text-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); /* 24px–30px */ --mc-text-4xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem); /* 30px–36px */ --mc-text-5xl: clamp(2.25rem, 1.8rem + 2vw, 3rem); /* 36px–48px */ /* Numeric font feature */ --mc-font-numeric: tabular-nums; /* Font weights */ --mc-font-normal: 400; --mc-font-medium: 500; --mc-font-semibold: 600; --mc-font-bold: 700; /* Line heights */ --mc-leading-none: 1; --mc-leading-tight: 1.25; --mc-leading-snug: 1.375; --mc-leading-normal: 1.5; --mc-leading-relaxed: 1.625; --mc-leading-loose: 2; /* Icon sizes (Material Symbols) */ --mc-icon-xs: 1rem; /* 16px - inline with text */ --mc-icon-sm: 1.125rem; /* 18px - small buttons */ --mc-icon-md: 1.25rem; /* 20px - default icon */ --mc-icon-lg: 1.5rem; /* 24px - standard Material */ --mc-icon-xl: 2rem; /* 32px - feature icons */ --mc-icon-2xl: 2.5rem; /* 40px - empty states */ --mc-icon-3xl: 3rem; /* 48px - hero icons */ /* Letter spacing */ --mc-tracking-tighter: -0.05em; --mc-tracking-tight: -0.025em; --mc-tracking-normal: 0; --mc-tracking-wide: 0.025em; --mc-tracking-wider: 0.05em; --mc-tracking-widest: 0.1em; /* ========================================================================== SHADOWS ========================================================================== */ --mc-shadow-xs: 0 1px 2px rgba(23, 43, 77, 0.04); --mc-shadow-sm: 0 1px 3px rgba(23, 43, 77, 0.08); --mc-shadow-md: 0 4px 8px rgba(23, 43, 77, 0.12); --mc-shadow-lg: 0 8px 16px rgba(23, 43, 77, 0.16); --mc-shadow-xl: 0 16px 24px rgba(23, 43, 77, 0.20); --mc-shadow-2xl: 0 24px 48px rgba(23, 43, 77, 0.24); /* Card shadow */ --mc-shadow-card: 0 1px 3px rgba(23, 43, 77, 0.1); --mc-shadow-card-hover: 0 4px 8px rgba(23, 43, 77, 0.12); /* Premium shadow system - layered depth */ --mc-shadow-premium: 0 1px 3px rgba(23, 43, 77, 0.08), 0 4px 12px rgba(23, 43, 77, 0.06); --mc-shadow-premium-hover: 0 4px 12px rgba(23, 43, 77, 0.12), 0 12px 24px rgba(23, 43, 77, 0.1); --mc-shadow-premium-active: 0 1px 3px rgba(23, 43, 77, 0.16); /* Premium easing curves */ --mc-ease-premium: cubic-bezier(0.4, 0, 0.2, 1); --mc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --mc-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --mc-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* Animation durations */ --mc-duration-instant: 50ms; --mc-duration-fast: 150ms; --mc-duration-normal: 200ms; --mc-duration-slow: 300ms; --mc-duration-slower: 400ms; /* Premium gradients */ --mc-gradient-subtle: linear-gradient(135deg, rgba(6, 102, 255, 0.02) 0%, transparent 100%); --mc-gradient-primary: linear-gradient(135deg, var(--mc-primary) 0%, #0052CC 100%); --mc-gradient-success: linear-gradient(135deg, var(--mc-success) 0%, #006644 100%); /* Dropdown shadow */ --mc-shadow-dropdown: 0 4px 12px rgba(23, 43, 77, 0.15); /* Modal shadow */ --mc-shadow-modal: 0 12px 40px rgba(23, 43, 77, 0.25); /* ========================================================================== BORDERS ========================================================================== */ --mc-radius-none: 0; --mc-radius-sm: 4px; --mc-radius-md: 8px; --mc-radius-lg: 12px; --mc-radius-xl: 16px; --mc-radius-2xl: 24px; --mc-radius-full: 9999px; --mc-border-width: 1px; --mc-border-width-2: 2px; /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --mc-z-base: 0; --mc-z-dropdown: 100; --mc-z-sticky: 200; --mc-z-fixed: 300; --mc-z-modal-backdrop: 400; --mc-z-modal: 500; --mc-z-popover: 600; --mc-z-tooltip: 700; --mc-z-toast: 800; /* ========================================================================== FOCUS ========================================================================== */ --mc-color-focus-ring: #2563EB; /* ========================================================================== TRANSITIONS ========================================================================== */ --mc-transition-fast: 150ms ease; --mc-transition-base: 250ms ease; --mc-transition-slow: 350ms ease; --mc-transition-slower: 500ms ease; --mc-ease-in: cubic-bezier(0.4, 0, 1, 1); --mc-ease-out: cubic-bezier(0, 0, 0.2, 1); --mc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Spring easing via CSS linear() for premium feel (88%+ browser support) */ --mc-ease-spring-native: linear(0, 0.006, 0.025, 0.058, 0.107, 0.170, 0.248, 0.339, 0.441, 0.553, 0.671, 0.793, 0.910, 1.017, 1.108, 1.178, 1.223, 1.243, 1.239, 1.215, 1.175, 1.122, 1.063, 1.000, 0.938, 0.882, 0.836, 0.800, 0.777, 0.765, 0.764, 0.773, 0.790, 0.814, 0.840, 0.868, 0.896, 0.922, 0.946, 0.966, 0.982, 0.994, 1.001, 1.004, 1.004, 1.000); /* ========================================================================== DENSITY (Comfortable default, Compact via [data-density="compact"]) ========================================================================== */ --mc-density-row-height: 44px; --mc-density-cell-padding-y: 12px; --mc-density-cell-padding-x: 16px; --mc-density-card-padding: 20px; /* ========================================================================== LAYOUT ========================================================================== */ --mc-sidebar-width: 260px; --mc-sidebar-collapsed-width: 72px; --mc-header-height: 64px; --mc-content-max-width: 1440px; /* ========================================================================== BREAKPOINTS (for reference - use @media in CSS) ========================================================================== */ /* --mc-breakpoint-sm: 640px; */ /* --mc-breakpoint-md: 768px; */ /* --mc-breakpoint-lg: 1024px; */ /* --mc-breakpoint-xl: 1280px; */ /* --mc-breakpoint-2xl: 1536px; */ /* ========================================================================== LAYER 3: COMPONENT TOKENS Component-specific aliases referencing semantic tokens. Use these in component CSS for maximum themability. ========================================================================== */ /* Card */ --mc-card-bg: var(--mc-bg-primary); --mc-card-border: var(--mc-border); --mc-card-radius: var(--mc-radius-lg); --mc-card-padding: var(--mc-density-card-padding); --mc-card-shadow: var(--mc-shadow-card); --mc-card-shadow-hover: var(--mc-shadow-card-hover); /* Table */ --mc-table-bg: var(--mc-bg-primary); --mc-table-header-bg: var(--mc-bg-secondary); --mc-table-border: var(--mc-border); --mc-table-row-hover: var(--mc-bg-hover); --mc-table-stripe-bg: var(--mc-bg-secondary); --mc-table-row-height: var(--mc-density-row-height); --mc-table-cell-padding-y: var(--mc-density-cell-padding-y); --mc-table-cell-padding-x: var(--mc-density-cell-padding-x); /* Button */ --mc-btn-padding-y: 6px; --mc-btn-padding-y-sm: 4px; --mc-btn-padding-y-lg: 8px; --mc-btn-radius: var(--mc-radius-md); --mc-btn-padding-x: 14px; --mc-btn-padding-x-sm: 10px; --mc-btn-padding-x-lg: 18px; --mc-btn-gap: 6px; --mc-btn-font-size: 13px; --mc-btn-font-weight: var(--mc-font-medium); --mc-btn-icon-size: 16px; --mc-btn-icon-size-sm: 14px; --mc-btn-icon-size-lg: 18px; --mc-btn-primary-bg: var(--mc-primary); --mc-btn-primary-hover: var(--mc-primary-hover); --mc-btn-primary-text: var(--mc-text-inverse); /* Input / Form */ --mc-input-bg: var(--mc-bg-primary); --mc-input-border: var(--mc-border); --mc-input-border-focus: var(--mc-border-focus); --mc-input-radius: var(--mc-radius-md); --mc-input-text: var(--mc-text-primary); --mc-input-placeholder: var(--mc-text-tertiary); /* Modal */ --mc-modal-bg: var(--mc-bg-primary); --mc-modal-border: var(--mc-border); --mc-modal-shadow: var(--mc-shadow-modal); --mc-modal-radius: var(--mc-radius-xl); --mc-modal-backdrop: var(--mc-overlay-dark); /* Sidebar */ --mc-sidebar-bg: var(--mc-bg-primary); --mc-sidebar-border: var(--mc-border); --mc-sidebar-text: var(--mc-text-secondary); --mc-sidebar-text-active: var(--mc-text-primary); --mc-sidebar-item-hover: var(--mc-bg-hover); --mc-sidebar-item-active: var(--mc-primary-light); /* Badge */ --mc-badge-radius: var(--mc-radius-full); --mc-badge-font-size: var(--mc-text-xs); --mc-badge-font-weight: var(--mc-font-medium); /* Toast */ --mc-toast-radius: var(--mc-radius-md); --mc-toast-shadow: var(--mc-shadow-lg); /* KPI / Stat Card */ --mc-stat-bg: var(--mc-bg-primary); --mc-stat-border: var(--mc-border); --mc-stat-radius: var(--mc-radius-lg); --mc-stat-padding: var(--mc-density-card-padding); /* Dropdown */ --mc-dropdown-bg: var(--mc-bg-elevated); --mc-dropdown-border: var(--mc-border); --mc-dropdown-shadow: var(--mc-shadow-dropdown); --mc-dropdown-radius: var(--mc-radius-lg); --mc-dropdown-item-hover: var(--mc-bg-hover); /* Header */ --mc-header-bg: var(--mc-bg-primary); --mc-header-border: var(--mc-border); --mc-header-height-val: var(--mc-header-height); } /* ========================================================================== DARK THEME - Cockpit at Night (Refined Contrast) ========================================================================== */ [data-theme="dark"] { /* Background colors - True charcoal, not pure black */ --mc-bg-page: #0F1216; /* Deep charcoal base */ --mc-bg-primary: #161B22; /* Card/panel background */ --mc-bg-secondary: #1C2128; /* Secondary containers */ --mc-bg-tertiary: #21262D; /* Tertiary surfaces */ --mc-bg-elevated: #1C2128; /* Elevated surfaces */ --mc-bg-hover: #21262D; /* Hover state */ --mc-bg-active: #2D333B; /* Active/pressed state */ /* Text colors — WCAG 2.2 AA audited (Feb 2026) Primary: #E6EDF3 on #161B22 = ~11.5:1 (AAA) Secondary: #9EAAB6 on #1C2128 = ~5.6:1 (AA) Tertiary: #768390 on #161B22 = ~4.6:1 (AA for readable text) Disabled: #545D68 on #161B22 = ~2.6:1 (decorative only) */ --mc-text-primary: #E6EDF3; --mc-text-secondary: #9EAAB6; --mc-text-tertiary: #768390; --mc-text-muted: var(--mc-text-tertiary); --mc-text-disabled: #545D68; --mc-text-inverse: #172B4D; --mc-text-link: #4C9AFF; /* Border colors - Subtle low-opacity strokes */ --mc-border: #30363D; /* 1px inner stroke visibility */ --mc-border-strong: #484F58; /* Strong emphasis borders */ --mc-border-focus: #58A6FF; /* Focus ring (brighter for visibility) */ /* Focus ring - dark mode */ --mc-color-focus-ring: #60A5FA; /* Semantic light backgrounds for dark mode */ --mc-success-light: #1C3829; --mc-warning-light: #3D2E17; --mc-danger-light: #3D1E17; --mc-info-light: #1C2B41; --mc-primary-light: #1C2B41; --mc-primary-lighter: #15202B; /* KPI backgrounds for dark mode */ --mc-kpi-positive-bg: #1C3829; --mc-kpi-negative-bg: #3D1E17; --mc-kpi-neutral-bg: #22272B; /* Shadows for dark mode */ --mc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.16); --mc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24); --mc-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.32); --mc-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.40); --mc-shadow-xl: 0 16px 24px rgba(0, 0, 0, 0.48); --mc-shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.56); --mc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.28); --mc-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.36); --mc-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.40); --mc-shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.56); /* ========================================================================== GRAPH THEME SYSTEM - Dark Slate Surfaces (Dec 2025) RULE: Graphs live on lifted surfaces, never on black void. Dashboard background can be dark. Graphs must NEVER be black. ========================================================================== */ /* Graph Container Surfaces - Lifted dark slate, not void */ --mc-graph-bg: #151A20; /* Lifted surface (was #111418) */ --mc-graph-border: rgba(255, 255, 255, 0.05); /* Subtle stroke */ --mc-graph-gridline: rgba(255, 255, 255, 0.06); /* Dashed guides */ /* Bar Chart Track - Background for progress bars */ --mc-bar-track: #1F2633; /* Tooltip Surface - Same family as graph surface */ --mc-tooltip-bg: #1C2330; /* Analytics Hub Accent - Cyan (single accent color rule) */ --mc-accent-analytics: #38BDF8; --mc-accent-analytics-glow: rgba(56, 189, 248, 0.25); --mc-accent-analytics-area: rgba(56, 189, 248, 0.08); /* Chart colors for dark mode - brighter for contrast on dark surfaces */ --mc-chart-1: #4C9AFF; --mc-chart-2: #36B37E; --mc-chart-3: #FFAB00; --mc-chart-4: #8777D9; --mc-chart-5: #00C7E6; --mc-chart-6: #FF7452; --mc-chart-7: #57D9A3; --mc-chart-8: #9EAAB6; --mc-chart-grid: rgba(255, 255, 255, 0.06); /* Semantic status colors (brighter for dark mode) */ --mc-success-text: #4ADE80; --mc-warning-text: #FBBF24; --mc-danger-text: #F87171; --mc-info-text: #60A5FA; /* ========================================================================== ALPHA-AWARE STATUS COLORS (Dark Mode) Higher alpha values for visibility on dark backgrounds ========================================================================== */ /* Success (Green) alpha variants - dark mode */ --mc-success-alpha-5: rgba(74, 222, 128, 0.08); --mc-success-alpha-8: rgba(74, 222, 128, 0.12); --mc-success-alpha-10: rgba(74, 222, 128, 0.15); --mc-success-alpha-15: rgba(74, 222, 128, 0.20); --mc-success-alpha-20: rgba(74, 222, 128, 0.25); /* Warning (Orange) alpha variants - dark mode */ --mc-warning-alpha-5: rgba(251, 191, 36, 0.08); --mc-warning-alpha-8: rgba(251, 191, 36, 0.12); --mc-warning-alpha-10: rgba(251, 191, 36, 0.15); --mc-warning-alpha-15: rgba(251, 191, 36, 0.20); --mc-warning-alpha-20: rgba(251, 191, 36, 0.25); /* Danger (Red) alpha variants - dark mode */ --mc-danger-alpha-5: rgba(248, 113, 113, 0.08); --mc-danger-alpha-8: rgba(248, 113, 113, 0.12); --mc-danger-alpha-10: rgba(248, 113, 113, 0.15); --mc-danger-alpha-15: rgba(248, 113, 113, 0.20); --mc-danger-alpha-20: rgba(248, 113, 113, 0.25); /* Info (Blue) alpha variants - dark mode */ --mc-info-alpha-5: rgba(96, 165, 250, 0.08); --mc-info-alpha-8: rgba(96, 165, 250, 0.12); --mc-info-alpha-10: rgba(96, 165, 250, 0.15); --mc-info-alpha-15: rgba(96, 165, 250, 0.20); --mc-info-alpha-20: rgba(96, 165, 250, 0.25); /* Neutral (Gray) alpha variants - dark mode */ --mc-neutral-alpha-5: rgba(148, 163, 184, 0.08); --mc-neutral-alpha-8: rgba(148, 163, 184, 0.12); --mc-neutral-alpha-10: rgba(148, 163, 184, 0.15); --mc-neutral-alpha-15: rgba(148, 163, 184, 0.20); --mc-neutral-alpha-20: rgba(148, 163, 184, 0.25); /* Primary (Blue) alpha variants - dark mode */ --mc-primary-alpha-5: rgba(76, 154, 255, 0.08); --mc-primary-alpha-8: rgba(76, 154, 255, 0.12); --mc-primary-alpha-10: rgba(76, 154, 255, 0.15); --mc-primary-alpha-15: rgba(76, 154, 255, 0.20); --mc-primary-alpha-20: rgba(76, 154, 255, 0.25); --mc-primary-alpha-25: rgba(76, 154, 255, 0.30); --mc-primary-alpha-30: rgba(76, 154, 255, 0.35); /* Additional UI polish tokens - dark mode */ --mc-primary-bg: rgba(76, 154, 255, 0.12); --mc-primary-focus-ring: rgba(76, 154, 255, 0.25); --mc-border-hover: #484F58; /* Gradient backgrounds for operational states - dark mode */ --mc-gradient-success-subtle: linear-gradient(135deg, #052e16 0%, #14532d 100%); --mc-gradient-warning-subtle: linear-gradient(135deg, #451a03 0%, #78350f 100%); --mc-gradient-danger-subtle: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); --mc-gradient-info-subtle: linear-gradient(135deg, #172554 0%, #1e3a5f 100%); /* Quick Access Tile Surfaces */ --mc-tile-default: #151A20; --mc-tile-hover: #1B222A; --mc-tile-border: rgba(255, 255, 255, 0.03); /* Capability Row Surfaces */ --mc-row-bg: #151A20; --mc-row-divider: rgba(255, 255, 255, 0.04); /* Overlay tokens - dark mode */ --mc-overlay-light: rgba(22, 27, 34, 0.92); --mc-overlay-dark: rgba(0, 0, 0, 0.7); } /* ========================================================================== COMPACT DENSITY MODE ========================================================================== */ [data-density="compact"] { --mc-density-row-height: 32px; --mc-density-cell-padding-y: 6px; --mc-density-cell-padding-x: 12px; --mc-density-card-padding: 12px; } /* ========================================================================== COLORBLIND-SAFE DATA VISUALIZATION PALETTE (Paul Tol) Use for charts and data series requiring >= 4 colors ========================================================================== */ :root { --mc-cb-blue: #332288; --mc-cb-cyan: #88CCEE; --mc-cb-teal: #44AA99; --mc-cb-green: #117733; --mc-cb-yellow: #DDCC77; --mc-cb-red: #CC6677; --mc-cb-pink: #AA4499; --mc-cb-grey: #999933; } /* ========================================================================== BASE STYLES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Removed: overflow: hidden; height: 100%; - allows natural page scrolling */ } body { margin: 0; padding: 0; font-family: var(--mc-font-family); font-size: var(--mc-text-base); font-weight: var(--mc-font-normal); line-height: var(--mc-leading-normal); color: var(--mc-text-primary); background-color: var(--mc-bg-page); min-height: 100vh; /* Ensure full viewport coverage */ /* Removed: overflow: hidden; height: 100%; - allows natural page scrolling */ } /* Opt-in containment for pages that need viewport lock (wizards, helpbot chat) */ html.mc-scroll-contained, html.mc-scroll-contained body { overflow: hidden; height: 100%; } /* Focus visible for accessibility (WCAG 2.2 2.4.11: >= 2px, >= 3:1 contrast) */ :focus-visible { outline: 2px solid var(--mc-color-focus-ring); outline-offset: 2px; border-radius: var(--mc-radius-sm); } /* Remove default outline for mouse users (pointer only) */ :focus:not(:focus-visible) { outline: none; } /* Selection color */ ::selection { background-color: var(--mc-primary-light); color: var(--mc-primary); } /* ========================================================================== ACCESSIBILITY - Reduced Motion Preferences Respects user's system preference for reduced motion. WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions) ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Disable all transitions and animations */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Preserve essential transforms (they're instant, not animated) */ .mc-animate-in, .mc-fade-in, .mc-slide-in { animation: none !important; opacity: 1 !important; transform: none !important; } /* Disable pulse/breathing effects */ .mc-pulse, .mc-spinner, [class*="--loading"] .mc-skeleton { animation: none !important; } /* Disable hover transforms */ .mc-kpi-card--clickable:hover, .mc-btn:hover, .mc-card:hover { transform: none !important; } /* Disable chart animations (Chart.js respects this via CSS variable) */ :root { --mc-animation-duration: 0; } } /* High contrast mode support (Windows) */ @media (forced-colors: active) { .mc-btn, .mc-card, .mc-kpi-card { border: 1px solid ButtonText; } .mc-btn--primary { background-color: Highlight; color: HighlightText; } :focus-visible { outline: 3px solid Highlight; } } /* ========================================================================== VIEW TRANSITIONS API (Progressive Enhancement) Smooth cross-fade between pages when used with hx-boost. Browser support: Chrome 111+, Edge 111+, Safari 18+. Falls back to standard navigation on unsupported browsers. ========================================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: mc-vt-fade-out 150ms ease-in; } ::view-transition-new(root) { animation: mc-vt-fade-in 200ms ease-out; } @keyframes mc-vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes mc-vt-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ========================================================================== GLOBAL TABULAR NUMBERS Ensures numeric alignment in data-heavy contexts. ========================================================================== */ .mc-table td[data-type="number"], .mc-table td[data-type="currency"], .mc-table td[data-type="percentage"], .mc-kpi-card__value, .mc-kpi-mini__value, .mc-stat__value, .mc-badge--count, .mc-context-item__value, [data-numeric] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ========================================================================== UPPERCASE UTILITY Auto-applies wider letter-spacing for legibility. ========================================================================== */ .mc-uppercase { text-transform: uppercase; letter-spacing: var(--mc-tracking-wider); }