/** * Mission Control — Design Tokens * Based on Jonny's DESIGN.md v1.0 * * Dark theme is the default (data-theme="dark" on ) * Light theme available via toggle * * Usage: Reference semantic tokens, not raw colors * Example: var(--text-primary) not #000000 */ :root { /* ═══════════════════════════════════════════════════════════════ DARK THEME (DEFAULT) ═══════════════════════════════════════════════════════════════ */ /* BACKGROUNDS */ --bg-base: #0B0F14; --bg-surface: #121821; --bg-elevated: #18212D; --bg-glass: rgba(18, 24, 33, 0.72); /* BORDERS */ --border-soft: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.18); /* TEXT */ --text-primary: #FAFAFA; --text-secondary: rgba(250, 250, 250, 0.72); --text-muted: rgba(250, 250, 250, 0.52); --text-disabled: rgba(250, 250, 250, 0.34); /* ═══════════════════════════════════════════════════════════════ ACCENTS ═══════════════════════════════════════════════════════════════ */ --accent-blue: #2F80ED; --accent-blue-soft: rgba(47, 128, 237, 0.15); /* ═══════════════════════════════════════════════════════════════ STATUS COLORS ═══════════════════════════════════════════════════════════════ */ --status-active: #22C55E; --status-busy: #F59E0B; --status-idle: #6B7280; --status-error: #EF4444; /* ═══════════════════════════════════════════════════════════════ AGENT ACCENT COLORS For avatar backgrounds and highlights ═══════════════════════════════════════════════════════════════ */ --agent-rupert: #F97316; /* Rupert */ --agent-jonny: #8B5CF6; /* Jonny */ --agent-bravo: #3B82F6; /* Bravo */ /* ═══════════════════════════════════════════════════════════════ SEMANTIC COLORS ═══════════════════════════════════════════════════════════════ */ --success: #22C55E; --warning: #F59E0B; --error: #EF4444; --info: #2F80ED; /* ═══════════════════════════════════════════════════════════════ SPACING SCALE (8px base) ═══════════════════════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 10px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.25; --line-height-normal: 1.6; --line-height-relaxed: 1.85; /* ═══════════════════════════════════════════════════════════════ RADII ═══════════════════════════════════════════════════════════════ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* ═══════════════════════════════════════════════════════════════ SHADOWS (dark mode optimized) ═══════════════════════════════════════════════════════════════ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.05); /* ═══════════════════════════════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════════════════════════════ */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */ --header-height: 72px; --footer-height: 56px; --content-max-width: 1280px; --card-min-width: 320px; --sidebar-width: 220px; /* ═══════════════════════════════════════════════════════════════ TAB NAVIGATION ═══════════════════════════════════════════════════════════════ */ --tab-bg: transparent; --tab-bg-active: var(--bg-elevated); --tab-border-active: var(--accent-blue); --tab-text: var(--text-secondary); --tab-text-active: var(--text-primary); /* ═══════════════════════════════════════════════════════════════ KANBAN ═══════════════════════════════════════════════════════════════ */ --kanban-column-bg: var(--bg-elevated); --kanban-drop-zone: rgba(47, 128, 237, 0.15); --kanban-drop-border: var(--accent-blue); /* ═══════════════════════════════════════════════════════════════ TASK STATUS ═══════════════════════════════════════════════════════════════ */ --status-waiting: var(--status-idle); --status-review: var(--accent-blue); /* ═══════════════════════════════════════════════════════════════ PROGRESS BAR ═══════════════════════════════════════════════════════════════ */ --progress-bg: var(--border-soft); --progress-fill: var(--accent-blue); --progress-fill-complete: var(--status-active); /* ═══════════════════════════════════════════════════════════════ EDIT MODE ═══════════════════════════════════════════════════════════════ */ --edit-highlight: rgba(47, 128, 237, 0.1); --edit-border: var(--accent-blue); /* ═══════════════════════════════════════════════════════════════ LANGUAGE COLORS (GitHub language colors) ═══════════════════════════════════════════════════════════════ */ --lang-typescript: #3178C6; --lang-javascript: #F7DF1E; --lang-react: #61DAFB; --lang-python: #3776AB; --lang-rust: #DEA584; --lang-go: #00ADD8; --lang-solidity: #AA6746; /* ═══════════════════════════════════════════════════════════════ PROJECT CARD ═══════════════════════════════════════════════════════════════ */ --project-card-bg: var(--bg-surface); --project-card-hover: var(--bg-elevated); --sparkline-color: var(--accent-blue); } /* ═══════════════════════════════════════════════════════════════════ LIGHT THEME Toggle with: document.documentElement.dataset.theme = 'light' ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* BACKGROUNDS */ --bg-base: #F6F7F9; --bg-surface: #FFFFFF; --bg-elevated: #F2F4F7; --bg-glass: rgba(255, 255, 255, 0.72); /* BORDERS */ --border-soft: #E7E9EE; --border-medium: #D3D8E0; --border-strong: #C6CDD8; /* TEXT */ --text-primary: #0B1220; --text-secondary: #3B4453; --text-muted: #667085; --text-disabled: #98A2B3; /* Accent adjustments for light mode */ --accent-blue-soft: rgba(47, 128, 237, 0.1); --status-idle: #9CA3AF; /* Shadows (lighter for light mode) */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.04); --shadow-md: 0 12px 24px rgba(16, 24, 40, 0.10), 0 0 0 1px rgba(16, 24, 40, 0.05); --shadow-lg: 0 20px 40px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.06); --shadow-card-hover: 0 16px 32px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.06); /* Kanban adjustments */ --kanban-drop-zone: rgba(47, 128, 237, 0.1); --edit-highlight: rgba(47, 128, 237, 0.05); }