/* * Design System - Color Tokens * * Mission Control Design System v2 * Based on the Mission Control design mockups with full dark mode support. * * Color palette includes: * - Primary: Sky blue (#13a4ec) for actions and emphasis * - Slate: Neutral grays for backgrounds, text, borders * - Status colors: Success (emerald), Warning (amber), Error (red) * * Dark mode: Applied when data-theme="dark" attribute is on element */ @layer base { :root { color-scheme: light; /* ======================================== * PRIMARY COLORS * Main brand color for primary actions, links, and focus states * Sky blue palette * ======================================== */ --color-primary-50: #f0f9ff; --color-primary-100: #e0f2fe; --color-primary-200: #bae6fd; --color-primary-300: #7dd3fc; --color-primary-400: #38bdf8; --color-primary-500: #13a4ec; /* Base primary - main brand color */ --color-primary-600: #0284c7; /* Primary hover state */ --color-primary-700: #0369a1; --color-primary-800: #075985; --color-primary-900: #0c4a6e; /* ======================================== * SLATE COLORS (Secondary/Neutral) * Used for backgrounds, text, borders, and UI elements * ======================================== */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; /* ======================================== * SURFACE COLORS * Specific background colors from mockups * ======================================== */ --color-bg-light: #f6f7f8; --color-bg-dark: #0d1117; --color-surface-dark: #161b22; --color-border-dark: #30363d; --color-row-hover: #161b22; /* ======================================== * SUCCESS COLORS (Emerald) * Positive states, confirmations, and success messages * ======================================== */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-200: #a7f3d0; --color-success-300: #6ee7b7; --color-success-400: #34d399; --color-success-500: #10b981; /* Base success */ --color-success-600: #059669; --color-success-700: #047857; --color-success-800: #065f46; --color-success-900: #064e3b; /* ======================================== * WARNING COLORS (Amber/Orange) * Alerts, cautions, and attention-needed states * ======================================== */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-200: #fde68a; --color-warning-300: #fcd34d; --color-warning-400: #fbbf24; --color-warning-500: #f59e0b; /* Base warning (amber) */ --color-warning-600: #d97706; --color-warning-700: #b45309; --color-warning-800: #92400e; --color-warning-900: #78350f; /* Orange colors for priority indicators and private content */ --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-200: #fed7aa; --color-orange-300: #fdba74; --color-orange-400: #fb923c; --color-orange-500: #f97316; --color-orange-600: #ea580c; --color-orange-700: #c2410c; --color-orange-800: #9a3412; --color-orange-900: #7c2d12; /* ======================================== * ERROR COLORS (Red) * Error states, destructive actions, and critical alerts * ======================================== */ --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-200: #fecaca; --color-error-300: #fca5a5; --color-error-400: #f87171; --color-error-500: #ef4444; /* Base error */ --color-error-600: #dc2626; --color-error-700: #b91c1c; --color-error-800: #991b1b; --color-error-900: #7f1d1d; /* ======================================== * ADDITIONAL ACCENT COLORS * For labels, badges, and visual variety * ======================================== */ --color-blue-500: #3b82f6; --color-blue-50: rgba(59, 130, 246, 0.1); --color-purple-500: #a855f7; --color-purple-50: rgba(168, 85, 247, 0.1); --color-indigo-500: #5e6ad2; /* Blue with purple hint - Linear Done color */ --color-indigo-50: rgba(94, 106, 210, 0.1); --color-amber-500: #f59e0b; --color-amber-400: #fbbf24; --color-amber-50: rgba(245, 158, 11, 0.1); --color-emerald-500: #10b981; --color-emerald-alpha-10: rgba(16, 185, 129, 0.1); /* Green colors for public/visible indicators */ --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-300: #86efac; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534; --color-green-900: #14532d; /* Violet/Purple colors for environment indicators */ --color-violet-600: #7c3aed; --color-violet-700: #6d28d9; --color-purple-600: #9333ea; /* Blue palette extensions */ --color-blue-alpha-15: rgba(59, 130, 246, 0.15); --color-blue-alpha-20: rgba(59, 130, 246, 0.2); --color-blue-alpha-30: rgba(59, 130, 246, 0.3); --color-blue-alpha-50: rgba(59, 130, 246, 0.5); --color-blue-700: #1d4ed8; --color-blue-900: #1e3a8a; /* Green alpha variants for subtle backgrounds */ --color-green-alpha-10: rgba(34, 197, 94, 0.1); --color-green-alpha-20: rgba(34, 197, 94, 0.2); /* Emerald alpha extension */ --color-emerald-alpha-20: rgba(16, 185, 129, 0.2); /* Yellow alpha for status indicators */ --color-yellow-alpha-20: rgba(234, 179, 8, 0.2); /* ======================================== * NEUTRAL COLORS (Legacy compatibility) * ======================================== */ --color-neutral-50: var(--color-slate-50); --color-neutral-100: var(--color-slate-100); --color-neutral-200: var(--color-slate-200); --color-neutral-300: var(--color-slate-300); --color-neutral-400: var(--color-slate-400); --color-neutral-500: var(--color-slate-500); --color-neutral-600: var(--color-slate-600); --color-neutral-700: var(--color-slate-700); --color-neutral-800: var(--color-slate-800); --color-neutral-900: var(--color-slate-900); --color-neutral-white: #fff; --color-neutral-black: #000; /* ======================================== * SEMANTIC ALIASES - LIGHT MODE * ======================================== */ /* Background colors */ --color-bg-primary: var(--color-bg-light); --color-bg-secondary: var(--color-neutral-white); --color-bg-tertiary: var(--color-slate-100); --color-bg-subtle: var(--color-slate-50); --color-bg-elevated: var(--color-slate-100); --color-bg-card: var(--color-neutral-white); --color-bg-inverse: var(--color-slate-900); --color-bg-hover: var(--color-slate-100); --color-bg-accent: var(--color-primary-50); --color-bg-accent-hover: var(--color-primary-100); --color-bg-accent-active: var(--color-primary-200); --color-bg-selected: var(--color-primary-50); /* Text colors */ --color-text-primary: var(--color-slate-900); --color-text-emphasis: var(--color-slate-800); --color-text-strong: var(--color-slate-700); --color-text-secondary: var(--color-slate-600); --color-text-tertiary: var(--color-slate-500); --color-text-muted: var(--color-slate-400); --color-text-inverse: var(--color-neutral-white); --color-text-link: var(--color-primary-500); --color-text-link-hover: var(--color-primary-600); --color-text-accent: var(--color-primary-700); --color-text-accent-bright: var(--color-primary-600); /* Border colors */ --color-border-primary: var(--color-slate-200); --color-border-secondary: var(--color-slate-300); --color-border-muted: var(--color-slate-300); --color-border-focus: var(--color-primary-500); /* Interactive states */ --color-interactive-primary: var(--color-primary-500); --color-interactive-primary-hover: var(--color-primary-600); --color-interactive-primary-active: var(--color-primary-700); --color-interactive-primary-text: var(--color-primary-600); --color-interactive-secondary: var(--color-slate-100); --color-interactive-secondary-hover: var(--color-slate-200); /* Status colors (for badges, indicators) */ --color-status-success-bg: var(--color-success-50); --color-status-success-text: var(--color-success-800); --color-status-success-border: var(--color-success-200); --color-status-success-action: var(--color-success-600); --color-status-warning-bg: var(--color-warning-50); --color-status-warning-text: var(--color-warning-700); --color-status-warning-border: var(--color-warning-200); --color-status-warning-action: var(--color-warning-700); --color-status-warning-subtle: var(--color-warning-100); --color-status-error-bg: var(--color-error-50); --color-status-error-text: var(--color-error-800); --color-status-error-border: var(--color-error-200); --color-status-error-action: var(--color-error-600); --color-status-info-bg: var(--color-primary-50); --color-status-info-text: var(--color-primary-800); --color-status-info-border: var(--color-primary-200); /* Capacity separator (MC-215) — muted to reduce visual noise */ --color-capacity-separator-line: var(--color-error-200); --color-capacity-separator-text: var(--color-error-300); /* ======================================== * FOCUS & ACCESSIBILITY * ======================================== */ --color-focus-ring: var(--color-primary-500); --color-focus-ring-offset: var(--color-neutral-white); --color-focus-base: var(--color-indigo-600); --color-focus-600: var(--color-indigo-hover); --color-focus-subtle: var(--color-indigo-alpha-10); --color-focus-medium: var(--color-indigo-alpha-15); --color-focus-moderate: var(--color-indigo-alpha-20); --color-focus-strong: var(--color-indigo-alpha-30); --focus-ring-error: rgba(239, 68, 68, 0.3); --focus-ring-error-strong: rgba(220, 38, 38, 0.3); /* Indigo palette (for non-focus indigo usage) */ --color-indigo-600: #6366f1; --color-indigo-hover: #4f46e5; --color-indigo-alpha-10: rgba(99, 102, 241, 0.1); --color-indigo-alpha-15: rgba(99, 102, 241, 0.15); --color-indigo-alpha-20: rgba(99, 102, 241, 0.2); --color-indigo-alpha-30: rgba(99, 102, 241, 0.3); /* ======================================== * OVERLAYS & ALPHA BACKGROUNDS * ======================================== */ --color-overlay: rgba(0, 0, 0, 0.5); --color-overlay-light: rgba(255, 255, 255, 0.8); --color-overlay-light-strong: rgba(255, 255, 255, 0.9); --color-overlay-dark: rgba(13, 17, 23, 0.9); --color-overlay-breadcrumb: rgba(0, 0, 0, 0.5); --color-hover-extra-subtle: rgba(0, 0, 0, 0.02); --color-hover-subtle: rgba(0, 0, 0, 0.03); --color-hover-moderate: rgba(0, 0, 0, 0.05); --color-white-alpha-5: rgba(255, 255, 255, 0.05); --color-white-alpha-10: rgba(255, 255, 255, 0.1); --color-white-alpha-15: rgba(255, 255, 255, 0.15); --color-white-alpha-20: rgba(255, 255, 255, 0.2); --color-white-alpha-30: rgba(255, 255, 255, 0.3); /* Primary alpha variants (for tinted backgrounds/borders) */ --color-primary-alpha-10: rgba(19, 164, 236, 0.1); --color-primary-alpha-15: rgba(19, 164, 236, 0.15); --color-primary-alpha-20: rgba(19, 164, 236, 0.2); --color-primary-alpha-25: rgba(19, 164, 236, 0.25); /* Error alpha variants */ --color-error-alpha-10: rgba(239, 68, 68, 0.1); --color-error-alpha-15: rgba(239, 68, 68, 0.15); --color-error-alpha-20: rgba(239, 68, 68, 0.2); --color-error-alpha-25: rgba(239, 68, 68, 0.25); --color-error-alpha-30: rgba(239, 68, 68, 0.3); /* Warning alpha variants */ --color-warning-alpha-10: rgba(245, 158, 11, 0.1); --color-warning-alpha-15: rgba(245, 158, 11, 0.15); --color-warning-alpha-20: rgba(245, 158, 11, 0.2); --color-warning-alpha-25: rgba(245, 158, 11, 0.25); --color-warning-alpha-30: rgba(245, 158, 11, 0.3); /* Orange alpha variants */ --color-orange-alpha-15: rgba(234, 88, 12, 0.15); /* Fallback color for dynamic CSS custom properties */ --color-fallback: #888; /* ======================================== * SHADOWS * ======================================== */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-toolbar: 0 8px 24px rgba(0, 0, 0, 0.2); /* ======================================== * TYPOGRAPHY * ======================================== */ --font-family-display: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, sans-serif; --font-family-sans: var(--font-family-display); --font-family-mono: ui-monospace, sfmono-regular, 'SF Mono', menlo, consolas, monospace; /* ======================================== * BORDER RADIUS * ======================================== */ --radius-sm: 0.25rem; --radius-default: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* ======================================== * SIDEBAR DIMENSIONS * ======================================== */ --sidebar-width: 16rem; /* 256px */ --header-height: 3.5rem; /* 56px */ } /* ======================================== * TEXT SELECTION STYLES (Light Mode) * ======================================== */ ::selection { background-color: var(--color-primary-200); color: var(--color-slate-900); } /* ======================================== * DARK MODE OVERRIDES * Applied when data-theme="dark" attribute is on element * ======================================== */ html[data-theme="dark"] { color-scheme: dark; /* Background colors */ --color-bg-primary: var(--color-bg-dark); --color-bg-secondary: var(--color-surface-dark); --color-bg-tertiary: var(--color-slate-800); --color-bg-subtle: rgba(30, 41, 59, 0.5); --color-bg-elevated: var(--color-slate-700); --color-bg-card: var(--color-slate-800); --color-bg-inverse: var(--color-neutral-white); --color-bg-hover: var(--color-row-hover); --color-bg-accent: var(--color-primary-alpha-10); --color-bg-accent-hover: var(--color-primary-alpha-20); --color-bg-accent-active: var(--color-primary-alpha-25); --color-bg-selected: var(--color-primary-900); /* Text colors */ --color-text-primary: var(--color-slate-100); --color-text-emphasis: var(--color-slate-200); --color-text-strong: var(--color-slate-300); --color-text-secondary: var(--color-slate-400); --color-text-tertiary: var(--color-slate-500); --color-text-muted: var(--color-slate-600); --color-text-inverse: var(--color-slate-900); --color-text-accent: var(--color-primary-300); --color-text-accent-bright: var(--color-primary-400); --color-text-link: var(--color-primary-400); --color-text-link-hover: var(--color-primary-300); /* Border colors */ --color-border-primary: var(--color-slate-800); --color-border-secondary: var(--color-slate-700); --color-border-muted: var(--color-slate-600); /* Interactive states */ --color-interactive-primary-text: var(--color-primary-400); --color-interactive-secondary: var(--color-slate-800); --color-interactive-secondary-hover: var(--color-slate-700); /* Status actions (for interactive status text/links) */ --color-status-success-action: var(--color-success-400); --color-status-warning-action: var(--color-warning-400); --color-status-warning-subtle: var(--color-warning-alpha-20); --color-status-error-action: var(--color-error-400); /* Focus */ --color-focus-ring: var(--color-primary-400); --color-focus-ring-offset: var(--color-bg-dark); --color-focus-glow: var(--color-blue-alpha-20); /* Overlays (adjusted for dark mode) */ --color-overlay: rgba(0, 0, 0, 0.7); --color-overlay-light: rgba(13, 17, 23, 0.9); --color-overlay-light-strong: rgba(13, 17, 23, 0.95); --color-overlay-breadcrumb: rgba(13, 17, 23, 0.5); --color-hover-extra-subtle: rgba(255, 255, 255, 0.02); --color-hover-subtle: rgba(255, 255, 255, 0.03); --color-hover-moderate: rgba(255, 255, 255, 0.05); /* Status colors (adjusted for dark backgrounds) */ --color-status-success-bg: rgba(16, 185, 129, 0.1); --color-status-success-text: var(--color-success-500); --color-status-success-border: rgba(16, 185, 129, 0.2); --color-status-warning-bg: rgba(245, 158, 11, 0.1); --color-status-warning-text: var(--color-warning-500); --color-status-warning-border: rgba(245, 158, 11, 0.2); --color-status-error-bg: rgba(239, 68, 68, 0.1); --color-status-error-text: var(--color-error-500); --color-status-error-border: rgba(239, 68, 68, 0.2); --color-status-info-bg: rgba(19, 164, 236, 0.1); --color-status-info-text: var(--color-primary-500); --color-status-info-border: rgba(19, 164, 236, 0.2); /* Capacity separator (MC-215) — muted to reduce visual noise */ --color-capacity-separator-line: rgba(239, 68, 68, 0.3); --color-capacity-separator-text: rgba(239, 68, 68, 0.5); /* Shadows (stronger in dark mode) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-toolbar: 0 8px 24px rgba(0, 0, 0, 0.4); } /* ======================================== * TEXT SELECTION STYLES (Dark Mode) * ======================================== */ html[data-theme="dark"] ::selection { background-color: var(--color-primary-700); color: var(--color-slate-100); } /* ======================================== * DARK MODE MEDIA QUERY FALLBACK * Applied when no data-theme attribute is set and * the user's OS prefers dark mode * ======================================== */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; /* Background colors */ --color-bg-primary: var(--color-bg-dark); --color-bg-secondary: var(--color-surface-dark); --color-bg-tertiary: var(--color-slate-800); --color-bg-subtle: rgba(30, 41, 59, 0.5); --color-bg-elevated: var(--color-slate-700); --color-bg-card: var(--color-slate-800); --color-bg-inverse: var(--color-neutral-white); --color-bg-hover: var(--color-row-hover); --color-bg-accent: var(--color-primary-alpha-10); --color-bg-accent-hover: var(--color-primary-alpha-20); --color-bg-accent-active: var(--color-primary-alpha-25); --color-bg-selected: var(--color-primary-900); /* Text colors */ --color-text-primary: var(--color-slate-100); --color-text-emphasis: var(--color-slate-200); --color-text-strong: var(--color-slate-300); --color-text-secondary: var(--color-slate-400); --color-text-tertiary: var(--color-slate-500); --color-text-muted: var(--color-slate-600); --color-text-inverse: var(--color-slate-900); --color-text-accent: var(--color-primary-300); --color-text-accent-bright: var(--color-primary-400); --color-text-link: var(--color-primary-400); --color-text-link-hover: var(--color-primary-300); /* Border colors */ --color-border-primary: var(--color-slate-800); --color-border-secondary: var(--color-slate-700); --color-border-muted: var(--color-slate-600); /* Interactive states */ --color-interactive-primary-text: var(--color-primary-400); --color-interactive-secondary: var(--color-slate-800); --color-interactive-secondary-hover: var(--color-slate-700); /* Status actions (for interactive status text/links) */ --color-status-success-action: var(--color-success-400); --color-status-warning-action: var(--color-warning-400); --color-status-warning-subtle: var(--color-warning-alpha-20); --color-status-error-action: var(--color-error-400); /* Focus */ --color-focus-ring: var(--color-primary-400); --color-focus-ring-offset: var(--color-bg-dark); --color-focus-glow: var(--color-blue-alpha-20); /* Overlays (adjusted for dark mode) */ --color-overlay: rgba(0, 0, 0, 0.7); --color-overlay-light: rgba(13, 17, 23, 0.9); --color-overlay-light-strong: rgba(13, 17, 23, 0.95); --color-overlay-breadcrumb: rgba(13, 17, 23, 0.5); --color-hover-extra-subtle: rgba(255, 255, 255, 0.02); --color-hover-subtle: rgba(255, 255, 255, 0.03); --color-hover-moderate: rgba(255, 255, 255, 0.05); /* Status colors (adjusted for dark backgrounds) */ --color-status-success-bg: rgba(16, 185, 129, 0.1); --color-status-success-text: var(--color-success-500); --color-status-success-border: rgba(16, 185, 129, 0.2); --color-status-warning-bg: rgba(245, 158, 11, 0.1); --color-status-warning-text: var(--color-warning-500); --color-status-warning-border: rgba(245, 158, 11, 0.2); --color-status-error-bg: rgba(239, 68, 68, 0.1); --color-status-error-text: var(--color-error-500); --color-status-error-border: rgba(239, 68, 68, 0.2); --color-status-info-bg: rgba(19, 164, 236, 0.1); --color-status-info-text: var(--color-primary-500); --color-status-info-border: rgba(19, 164, 236, 0.2); /* Capacity separator (MC-215) */ --color-capacity-separator-line: var(--color-error-500); --color-capacity-separator-text: var(--color-error-400); /* Shadows (stronger in dark mode) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-toolbar: 0 8px 24px rgba(0, 0, 0, 0.4); } html:not([data-theme]) ::selection { background-color: var(--color-primary-700); color: var(--color-slate-100); } } } /* @layer base */