/** * Suunta.ai Design System - Variables * ==================================== * "Northern Lights" Color Palette * Deep night sky + Aurora Emerald + Arctic Gold * * Theme modes * ----------- * - Default tokens in :root = dark theme. * - Light theme overrides in :root[data-theme="light"]. * - Add new colors as semantic tokens, then override in light. */ :root { /* ========================================== BRAND COLORS - "Northern Sky" Deep night sky with a violet tint ========================================== */ --brand-blue-100: rgba(82, 88, 102, 1); /* #525866 - Lightest */ --brand-blue-200: rgba(62, 68, 82, 1); /* #3e4452 */ --brand-blue-300: rgba(48, 53, 66, 1); /* #303542 */ --brand-blue-400: rgba(38, 42, 54, 1); /* #262a36 */ --brand-blue-500: rgba(28, 32, 42, 1); /* #1c202a - Primary BG */ --brand-blue-550: rgba(26, 31, 46, 1); /* #1a1f2e - Elevated panel */ --brand-blue-600: rgba(24, 27, 36, 1); /* #181b24 - Secondary BG */ --brand-blue-700: rgba(18, 20, 28, 1); /* #12141c - Deepest */ --brand-blue-700-transparent: rgba(18, 20, 28, 0.85); /* ========================================== NEUTRAL COLORS ========================================== */ --white: rgba(255, 255, 255, 1); --grey-300: rgba(249, 250, 251, 1); --grey-400: rgba(241, 245, 249, 1); --grey-500: rgba(226, 232, 240, 1); --grey-600: rgba(209, 213, 219, 1); --grey-700: rgba(184, 189, 198, 1); /* ========================================== PRIMARY ACCENT - "Aurora Emerald" Sophisticated, nature-forward green ========================================== */ --emerald-300: rgba(110, 231, 183, 1); /* #6ee7b7 */ --emerald-400: rgba(52, 211, 153, 1); /* #34d399 */ --emerald-500: rgba(16, 185, 129, 1); /* #10b981 - Primary accent */ --emerald-600: rgba(5, 150, 105, 1); /* #059669 */ --emerald-700: rgba(4, 120, 87, 1); /* #047857 */ --emerald-600-transparent: rgba(16, 185, 129, 0.3); /* Legacy green aliases (for compatibility) */ --green-300: var(--emerald-300); --green-400: var(--emerald-400); --green-500: var(--emerald-500); --green-600: var(--emerald-600); --green-600-transparent: var(--emerald-600-transparent); /* ========================================== SECONDARY ACCENT - "Arctic Gold" Premium warm gold for accents ========================================== */ --gold-300: rgba(252, 211, 77, 1); /* #fcd34d */ --gold-400: rgba(251, 191, 36, 1); /* #fbbf24 */ --gold-500: rgba(245, 158, 11, 1); /* #f59e0b - Gold accent */ --gold-600: rgba(217, 119, 6, 1); /* #d97706 */ --gold-700: rgba(180, 83, 9, 1); /* #b45309 */ --gold-600-transparent: rgba(245, 158, 11, 0.25); /* ========================================== FUNCTIONAL COLORS ========================================== */ /* Yellows (Warnings) */ --yellow-300: rgba(254, 249, 195, 1); --yellow-400: rgba(253, 230, 138, 1); --yellow-500: rgba(250, 204, 21, 1); --yellow-600: rgba(202, 138, 4, 1); --yellow-600-transparent: rgba(250, 204, 21, 0.2); /* Reds (Errors) */ --red-300: rgba(254, 202, 202, 1); --red-400: rgba(252, 165, 165, 1); --red-500: rgba(239, 68, 68, 1); --red-600: rgba(185, 28, 28, 1); --red-550-transparent: rgba(239, 68, 68, 0.2); /* Blues (Info) */ --blue-300: rgba(147, 197, 253, 1); --blue-400: rgba(96, 165, 250, 1); --blue-500: rgba(59, 130, 246, 1); --blue-600: rgba(37, 99, 235, 1); --blue-600-transparent: rgba(59, 130, 246, 0.2); /* Purples (Special, badges) */ --purple-400: rgba(167, 139, 250, 1); --purple-500: rgba(139, 92, 246, 1); --purple-600: rgba(124, 58, 237, 1); --purple-600-transparent: rgba(139, 92, 246, 0.2); /* Teals (Focus, measurement) */ --teal-300: rgba(94, 234, 212, 1); --teal-400: rgba(45, 212, 191, 1); --teal-500: rgba(20, 184, 166, 1); --teal-600: rgba(13, 148, 136, 1); --teal-600-transparent: rgba(20, 184, 166, 0.2); /* Cyans (Information, clarity) */ --cyan-400: rgba(34, 211, 238, 1); --cyan-500: rgba(6, 182, 212, 1); --cyan-600: rgba(8, 145, 178, 1); /* Indigos (Vision, strategy) */ --indigo-200: rgba(199, 210, 254, 1); /* #c7d2fe */ --indigo-300: rgba(165, 180, 252, 1); --indigo-400: rgba(129, 140, 248, 1); --indigo-500: rgba(99, 102, 241, 1); --indigo-600: rgba(79, 70, 229, 1); --indigo-700: rgba(67, 56, 202, 1); --indigo-600-transparent: rgba(99, 102, 241, 0.2); /* Oranges (Energy, metrics) */ --orange-300: rgba(253, 186, 116, 1); --orange-400: rgba(251, 146, 60, 1); --orange-500: rgba(249, 115, 22, 1); --orange-600: rgba(234, 88, 12, 1); --orange-600-transparent: rgba(249, 115, 22, 0.2); /* Roses (People, community) */ --rose-300: rgba(253, 164, 175, 1); --rose-400: rgba(251, 113, 133, 1); --rose-500: rgba(244, 63, 94, 1); --rose-600: rgba(225, 29, 72, 1); --rose-600-transparent: rgba(244, 63, 94, 0.2); /* Ambers (Premium highlights) */ --amber-400: rgba(251, 191, 36, 1); --amber-500: rgba(245, 158, 11, 1); --amber-600: rgba(217, 119, 6, 1); /* ========================================== HERO COLOR THEMES Each page has a unique, harmonious theme ========================================== */ /* Tasks - Emerald (Action, completion) */ --hero-tasks-primary: #10b981; --hero-tasks-secondary: #34d399; --hero-tasks-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.03) 100%); --hero-tasks-border: rgba(16, 185, 129, 0.25); --hero-tasks-icon-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(52, 211, 153, 0.12) 100%); /* OKRs - Teal (Focus, measurement) */ --hero-okrs-primary: #14b8a6; --hero-okrs-secondary: #2dd4bf; --hero-okrs-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(45, 212, 191, 0.03) 100%); --hero-okrs-border: rgba(20, 184, 166, 0.25); --hero-okrs-icon-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(45, 212, 191, 0.12) 100%); /* KPIs - Gold/Amber (Energy, pulse) */ --hero-kpis-primary: #f59e0b; --hero-kpis-secondary: #fbbf24; --hero-kpis-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.03) 100%); --hero-kpis-border: rgba(245, 158, 11, 0.25); --hero-kpis-icon-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(251, 191, 36, 0.12) 100%); /* Projects - Blue (Building, process) */ --hero-projects-primary: #3b82f6; --hero-projects-secondary: #60a5fa; --hero-projects-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.03) 100%); --hero-projects-border: rgba(59, 130, 246, 0.25); --hero-projects-icon-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(96, 165, 250, 0.12) 100%); /* Sources - Purple (Knowledge, intelligence) */ --hero-sources-primary: #8b5cf6; --hero-sources-secondary: #a78bfa; --hero-sources-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.03) 100%); --hero-sources-border: rgba(139, 92, 246, 0.25); --hero-sources-icon-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(167, 139, 250, 0.12) 100%); /* Strategy - Indigo (Vision, planning) */ --hero-strategy-primary: #6366f1; --hero-strategy-secondary: #818cf8; --hero-strategy-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.03) 100%); --hero-strategy-border: rgba(99, 102, 241, 0.25); --hero-strategy-icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(129, 140, 248, 0.12) 100%); /* Team - Rose (People, community) */ --hero-team-primary: #f43f5e; --hero-team-secondary: #fb7185; --hero-team-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(251, 113, 133, 0.03) 100%); --hero-team-border: rgba(244, 63, 94, 0.25); --hero-team-icon-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.25) 0%, rgba(251, 113, 133, 0.12) 100%); /* Chat - Emerald tint (Brand connection, clarity) */ --hero-chat-primary: #34d399; --hero-chat-secondary: #6ee7b7; --hero-chat-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.06) 0%, rgba(110, 231, 183, 0.02) 100%); --hero-chat-border: rgba(52, 211, 153, 0.15); --hero-chat-icon-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(110, 231, 183, 0.04) 100%); /* Homepage/Console - Emerald (Growth, dashboard) */ --hero-homepage-primary: #10b981; --hero-homepage-secondary: #34d399; --hero-homepage-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.03) 100%); --hero-homepage-border: rgba(16, 185, 129, 0.25); --hero-homepage-icon-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(52, 211, 153, 0.12) 100%); /* Slates (Settings, neutral UI) */ --slate-400: rgba(148, 163, 184, 1); /* #94a3b8 */ --slate-500: rgba(100, 116, 139, 1); /* #64748b */ --slate-600: rgba(71, 85, 105, 1); /* #475569 */ --slate-700: rgba(51, 65, 85, 1); /* #334155 */ /* Settings - Slate (Configuration, system) */ --hero-settings-primary: var(--slate-500); --hero-settings-secondary: var(--slate-400); --hero-settings-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(148, 163, 184, 0.03) 100%); --hero-settings-border: rgba(100, 116, 139, 0.25); --hero-settings-icon-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.25) 0%, rgba(148, 163, 184, 0.12) 100%); /* ========================================== SEMANTIC COLORS ========================================== */ /* Backgrounds - Deep Northern Sky */ --color-bg-primary: var(--brand-blue-500); --color-bg-secondary: var(--brand-blue-600); --color-bg-tertiary: var(--brand-blue-700); --color-bg-card: var(--brand-blue-600); --color-bg-elevated: var(--brand-blue-550); --color-bg-input: var(--brand-blue-700); --color-bg-hover: var(--brand-blue-400); /* Text - Crisp whites and soft greys */ --color-text-primary: rgba(255, 255, 255, 0.95); --color-text-secondary: rgba(226, 232, 240, 0.85); --color-text-tertiary: rgba(255, 255, 255, 0.4); --color-text-muted: rgba(148, 163, 184, 0.8); --color-text-placeholder: var(--brand-blue-100); /* Accent - Aurora Emerald */ --color-accent: var(--emerald-500); --color-accent-hover: var(--emerald-600); --color-accent-muted: var(--emerald-600-transparent); --color-accent-light: var(--emerald-400); /* Secondary Accent - Arctic Gold */ --color-gold: var(--gold-500); --color-gold-hover: var(--gold-600); --color-gold-muted: var(--gold-600-transparent); /* Status */ --color-success: var(--emerald-500); --color-warning: var(--gold-500); --color-error: var(--red-500); --color-info: var(--blue-500); /* OKR Status Colors */ --color-on-track: var(--emerald-500); --color-at-risk: var(--red-500); --color-needs-attention: var(--gold-500); --color-achieved: var(--emerald-400); /* Borders */ --color-border: var(--brand-blue-300); --color-border-primary: var(--glass-border); --color-border-focus: var(--emerald-500); /* ========================================== LIQUID GLASS EFFECTS - Aurora Style ========================================== */ --glass-bg: rgba(24, 27, 36, 0.65); --glass-bg-light: rgba(28, 32, 42, 0.45); --glass-bg-hover: rgba(38, 42, 54, 0.55); --glass-bg-solid: rgba(24, 27, 36, 0.95); --glass-bg-card: rgba(24, 27, 36, 0.75); --glass-border: rgba(255, 255, 255, 0.06); --glass-border-hover: rgba(255, 255, 255, 0.1); --glass-border-active: rgba(255, 255, 255, 0.14); --glass-border-accent: rgba(16, 185, 129, 0.35); --glass-bg-strong: rgba(255, 255, 255, 0.08); --glass-border-strong: rgba(255, 255, 255, 0.15); /* Subtle white overlays (for glass layers) */ --overlay-white-2: rgba(255, 255, 255, 0.02); --overlay-white-3: rgba(255, 255, 255, 0.03); --overlay-white-4: rgba(255, 255, 255, 0.04); --overlay-white-5: rgba(255, 255, 255, 0.05); --overlay-white-6: rgba(255, 255, 255, 0.06); --overlay-white-7: rgba(255, 255, 255, 0.07); --overlay-white-8: rgba(255, 255, 255, 0.08); --overlay-white-10: rgba(255, 255, 255, 0.1); --overlay-white-12: rgba(255, 255, 255, 0.12); --overlay-white-15: rgba(255, 255, 255, 0.15); --overlay-white-20: rgba(255, 255, 255, 0.2); /* Emerald alpha tints (accent overlays) */ --emerald-alpha-3: rgba(16, 185, 129, 0.03); --emerald-alpha-4: rgba(16, 185, 129, 0.04); --emerald-alpha-5: rgba(16, 185, 129, 0.05); --emerald-alpha-6: rgba(16, 185, 129, 0.06); --emerald-alpha-8: rgba(16, 185, 129, 0.08); --emerald-alpha-10: rgba(16, 185, 129, 0.1); --emerald-alpha-12: rgba(16, 185, 129, 0.12); --emerald-alpha-15: rgba(16, 185, 129, 0.15); --emerald-alpha-18: rgba(16, 185, 129, 0.18); --emerald-alpha-20: rgba(16, 185, 129, 0.2); --emerald-alpha-22: rgba(16, 185, 129, 0.22); --emerald-alpha-25: rgba(16, 185, 129, 0.25); --emerald-alpha-28: rgba(16, 185, 129, 0.28); --emerald-alpha-30: rgba(16, 185, 129, 0.3); --emerald-alpha-35: rgba(16, 185, 129, 0.35); --emerald-alpha-40: rgba(16, 185, 129, 0.4); --emerald-alpha-45: rgba(16, 185, 129, 0.45); --emerald-alpha-50: rgba(16, 185, 129, 0.5); --emerald-alpha-60: rgba(16, 185, 129, 0.6); --emerald-alpha-70: rgba(16, 185, 129, 0.7); --emerald-alpha-85: rgba(16, 185, 129, 0.85); /* Red alpha tints (error overlays) */ --red-alpha-5: rgba(239, 68, 68, 0.05); --red-alpha-8: rgba(239, 68, 68, 0.08); --red-alpha-10: rgba(239, 68, 68, 0.1); --red-alpha-12: rgba(239, 68, 68, 0.12); --red-alpha-15: rgba(239, 68, 68, 0.15); --red-alpha-20: rgba(239, 68, 68, 0.2); --red-alpha-30: rgba(239, 68, 68, 0.3); --red-alpha-50: rgba(239, 68, 68, 0.5); /* Gold/Amber alpha tints (warning overlays) */ --gold-alpha-5: rgba(245, 158, 11, 0.05); --gold-alpha-6: rgba(245, 158, 11, 0.06); --gold-alpha-8: rgba(245, 158, 11, 0.08); --gold-alpha-10: rgba(245, 158, 11, 0.1); --gold-alpha-15: rgba(245, 158, 11, 0.15); --gold-alpha-20: rgba(245, 158, 11, 0.2); --gold-alpha-25: rgba(245, 158, 11, 0.25); --gold-alpha-30: rgba(245, 158, 11, 0.3); --gold-alpha-35: rgba(245, 158, 11, 0.35); --gold-alpha-40: rgba(245, 158, 11, 0.4); /* Blue alpha tints (info/projects overlays) */ --blue-alpha-5: rgba(59, 130, 246, 0.05); --blue-alpha-8: rgba(59, 130, 246, 0.08); --blue-alpha-10: rgba(59, 130, 246, 0.1); --blue-alpha-12: rgba(59, 130, 246, 0.12); --blue-alpha-15: rgba(59, 130, 246, 0.15); --blue-alpha-20: rgba(59, 130, 246, 0.2); --blue-alpha-25: rgba(59, 130, 246, 0.25); --blue-alpha-30: rgba(59, 130, 246, 0.3); /* Rose alpha tints (team/people overlays) */ --rose-alpha-5: rgba(244, 63, 94, 0.05); --rose-alpha-8: rgba(244, 63, 94, 0.08); --rose-alpha-10: rgba(244, 63, 94, 0.1); --rose-alpha-15: rgba(244, 63, 94, 0.15); --rose-alpha-20: rgba(244, 63, 94, 0.2); --rose-alpha-25: rgba(244, 63, 94, 0.25); /* Indigo alpha tints (strategy/vision overlays) */ --indigo-alpha-5: rgba(99, 102, 241, 0.05); --indigo-alpha-8: rgba(99, 102, 241, 0.08); --indigo-alpha-10: rgba(99, 102, 241, 0.1); --indigo-alpha-15: rgba(99, 102, 241, 0.15); --indigo-alpha-20: rgba(99, 102, 241, 0.2); --indigo-alpha-25: rgba(99, 102, 241, 0.25); --indigo-alpha-30: rgba(99, 102, 241, 0.3); --indigo-alpha-35: rgba(99, 102, 241, 0.35); --indigo-alpha-40: rgba(99, 102, 241, 0.4); /* Purple alpha tints (chat/communication overlays) */ --purple-alpha-5: rgba(139, 92, 246, 0.05); --purple-alpha-8: rgba(139, 92, 246, 0.08); --purple-alpha-10: rgba(139, 92, 246, 0.1); --purple-alpha-12: rgba(139, 92, 246, 0.12); --purple-alpha-15: rgba(139, 92, 246, 0.15); --purple-alpha-20: rgba(139, 92, 246, 0.2); --purple-alpha-25: rgba(139, 92, 246, 0.25); --purple-alpha-35: rgba(139, 92, 246, 0.35); /* Orange alpha tints (CRM/sales overlays) */ --orange-alpha-5: rgba(249, 115, 22, 0.05); --orange-alpha-8: rgba(249, 115, 22, 0.08); --orange-alpha-10: rgba(249, 115, 22, 0.1); --orange-alpha-12: rgba(249, 115, 22, 0.12); --orange-alpha-15: rgba(249, 115, 22, 0.15); --orange-alpha-20: rgba(249, 115, 22, 0.2); --orange-alpha-25: rgba(249, 115, 22, 0.25); --orange-alpha-35: rgba(249, 115, 22, 0.35); /* Teal alpha tints (documents/knowledge overlays) */ --teal-alpha-5: rgba(20, 184, 166, 0.05); --teal-alpha-8: rgba(20, 184, 166, 0.08); --teal-alpha-10: rgba(20, 184, 166, 0.1); --teal-alpha-12: rgba(20, 184, 166, 0.12); --teal-alpha-15: rgba(20, 184, 166, 0.15); --teal-alpha-20: rgba(20, 184, 166, 0.2); --teal-alpha-25: rgba(20, 184, 166, 0.25); --teal-alpha-35: rgba(20, 184, 166, 0.35); /* Cyan alpha tints (chat/communication overlays) */ --cyan-alpha-4: rgba(6, 182, 212, 0.04); --cyan-alpha-5: rgba(6, 182, 212, 0.05); --cyan-alpha-6: rgba(6, 182, 212, 0.06); --cyan-alpha-8: rgba(6, 182, 212, 0.08); --cyan-alpha-10: rgba(6, 182, 212, 0.1); --cyan-alpha-12: rgba(6, 182, 212, 0.12); --cyan-alpha-15: rgba(6, 182, 212, 0.15); --cyan-alpha-18: rgba(6, 182, 212, 0.18); --cyan-alpha-20: rgba(6, 182, 212, 0.2); --cyan-alpha-25: rgba(6, 182, 212, 0.25); --cyan-alpha-28: rgba(6, 182, 212, 0.28); --cyan-alpha-30: rgba(6, 182, 212, 0.3); --cyan-alpha-35: rgba(6, 182, 212, 0.35); --cyan-alpha-40: rgba(6, 182, 212, 0.4); --cyan-alpha-50: rgba(6, 182, 212, 0.5); --cyan-alpha-60: rgba(6, 182, 212, 0.6); /* Slate alpha tints (settings/neutral overlays) */ --slate-alpha-5: rgba(100, 116, 139, 0.05); --slate-alpha-8: rgba(100, 116, 139, 0.08); --slate-alpha-10: rgba(100, 116, 139, 0.1); --slate-alpha-15: rgba(100, 116, 139, 0.15); --slate-alpha-20: rgba(100, 116, 139, 0.2); --slate-alpha-25: rgba(100, 116, 139, 0.25); --slate-alpha-35: rgba(100, 116, 139, 0.35); /* Text white opacities */ --text-white-90: rgba(255, 255, 255, 0.9); --text-white-80: rgba(255, 255, 255, 0.8); --text-white-70: rgba(255, 255, 255, 0.7); --text-white-60: rgba(255, 255, 255, 0.6); --text-white-50: rgba(255, 255, 255, 0.5); --text-white-45: rgba(255, 255, 255, 0.45); --text-white-40: rgba(255, 255, 255, 0.4); --text-white-35: rgba(255, 255, 255, 0.35); --text-white-30: rgba(255, 255, 255, 0.3); /* Overlay scrims (for modals, panels, drawers) */ --overlay-scrim: rgba(0, 0, 0, 0.5); --overlay-scrim-dark: rgba(0, 0, 0, 0.6); --overlay-scrim-light: rgba(0, 0, 0, 0.3); /* Surface gradients */ --surface-glass-70: rgba(24, 27, 36, 0.7); --surface-glass-86: rgba(18, 20, 28, 0.86); --surface-emerald-86: rgba(18, 24, 22, 0.86); --surface-emerald-90: rgba(12, 18, 16, 0.9); /* Chat user message - emerald gradient bubble */ --chat-user-bubble-bg: linear-gradient(135deg, var(--emerald-500), var(--emerald-600)); --chat-user-bubble-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); --chat-user-avatar-bg: var(--emerald-500); --glass-blur: 20px; --glass-blur-strong: 40px; --glass-blur-subtle: 12px; /* ========================================== GLOW EFFECTS - Aurora Style ========================================== */ /* Primary Aurora Emerald Glow */ --glow-accent: 0 0 40px rgba(16, 185, 129, 0.18); --glow-accent-strong: 0 0 60px rgba(16, 185, 129, 0.28); --glow-accent-subtle: 0 0 24px rgba(16, 185, 129, 0.12); /* Accent shadows (used by buttons/cards) */ --shadow-accent-sm: 0 0 12px rgba(16, 185, 129, 0.4); --shadow-accent-md: 0 6px 18px rgba(16, 185, 129, 0.18); --shadow-accent-lg: 0 10px 24px rgba(16, 185, 129, 0.28); --shadow-accent-xs: 0 0 6px rgba(16, 185, 129, 0.25); --shadow-accent-soft: 0 0 12px rgba(16, 185, 129, 0.18); --shadow-accent-glow: 0 0 16px rgba(16, 185, 129, 0.3); --shadow-accent-focus: 0 0 0 3px rgba(16, 185, 129, 0.15); /* Soft elevation */ --shadow-soft-card: 0 4px 24px rgba(0, 0, 0, 0.2); --shadow-elev-1: 0 10px 28px rgba(0, 0, 0, 0.25); --shadow-elev-2: 0 14px 34px rgba(0, 0, 0, 0.28); --shadow-inner-soft: inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-inner-dark: inset 0 1px 2px rgba(0, 0, 0, 0.35); /* Secondary Arctic Gold Glow */ --glow-gold: 0 0 35px rgba(245, 158, 11, 0.18); --glow-gold-strong: 0 0 50px rgba(245, 158, 11, 0.28); /* Status Glows */ --glow-error: 0 0 30px rgba(239, 68, 68, 0.18); --glow-info: 0 0 30px rgba(59, 130, 246, 0.18); --glow-warning: 0 0 30px rgba(245, 158, 11, 0.18); --glow-purple: 0 0 30px rgba(139, 92, 246, 0.18); --glow-teal: 0 0 30px rgba(20, 184, 166, 0.18); /* ========================================== GLASS ICON BOX - Gradient Backgrounds Used for icon containers with colored glass effect 📖 AI REFERENCE: Use with .glass-icon-box class in components.css Docs: docs/console/STYLEGUIDE.md → "Glass Icon Box" GRADIENT FORMULA: - Direction: 135deg (top-left → bottom-right) - Start: base color @ 0.25 opacity - End: lighter variant @ 0.12 opacity - Border: base color @ 0.35 opacity ========================================== */ /* Purple - Chat/Communication (Slack, Teams) */ --glass-icon-purple: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(167, 139, 250, 0.12) 100%); --glass-icon-purple-border: rgba(139, 92, 246, 0.35); /* Blue - Calendar/Scheduling */ --glass-icon-blue: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(96, 165, 250, 0.12) 100%); --glass-icon-blue-border: rgba(59, 130, 246, 0.35); /* Indigo - Docs/Strategy (Notion, Drive) */ --glass-icon-indigo: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(129, 140, 248, 0.12) 100%); --glass-icon-indigo-border: rgba(99, 102, 241, 0.35); /* Teal - Knowledge/SharePoint */ --glass-icon-teal: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(45, 212, 191, 0.12) 100%); --glass-icon-teal-border: rgba(20, 184, 166, 0.35); /* Emerald - Analytics/Data (Sheets) */ --glass-icon-emerald: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(52, 211, 153, 0.12) 100%); --glass-icon-emerald-border: rgba(16, 185, 129, 0.35); /* Orange - CRM/Sales (HubSpot) */ --glass-icon-orange: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(251, 146, 60, 0.12) 100%); --glass-icon-orange-border: rgba(249, 115, 22, 0.35); /* Rose - People/Asana */ --glass-icon-rose: linear-gradient(135deg, rgba(244, 63, 94, 0.25) 0%, rgba(251, 113, 133, 0.12) 100%); --glass-icon-rose-border: rgba(244, 63, 94, 0.35); /* Gold - Warnings/Highlights */ --glass-icon-gold: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(252, 211, 77, 0.12) 100%); --glass-icon-gold-border: rgba(245, 158, 11, 0.35); /* Cyan - AI/Chat */ --glass-icon-cyan: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(103, 232, 249, 0.12) 100%); --glass-icon-cyan-border: rgba(6, 182, 212, 0.35); /* ========================================== TYPOGRAPHY ========================================== */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Alias for backward compatibility */ --font-family: var(--font-family-base); --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; /* ========================================== SPACING ========================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ========================================== BORDER RADIUS (Rounded corners) ========================================== */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.625rem; /* 10px */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1.125rem; /* 18px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* ========================================== SHADOWS (Soft shadows) ========================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 20px var(--emerald-600-transparent); --shadow-glow-gold: 0 0 20px var(--gold-600-transparent); /* Card shadow with glow */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1); /* ========================================== FOCUS STATES (Accessibility) WCAG 2.1 AA requires 3:1 contrast for focus indicators ========================================== */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--emerald-500); --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--color-bg-primary), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color); /* ========================================== TRANSITIONS (Smooth motion) ========================================== */ /* Easing curves */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1); /* Durations */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --duration-slowest: 1200ms; /* Common transitions */ --transition-fast: var(--duration-fast) var(--ease-smooth); --transition-base: var(--duration-normal) var(--ease-smooth); --transition-slow: var(--duration-slow) var(--ease-smooth); --transition-bounce: var(--duration-normal) var(--ease-bounce); --transition-expo: var(--duration-slow) var(--ease-out-expo); /* ========================================== Z-INDEX SCALE ========================================== */ --z-below: -1; --z-base: 0; --z-above: 1; --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 250; --z-overlay: 300; --z-modal: 400; --z-panel: 450; --z-tooltip: 500; --z-toast: 600; /* ========================================== LAYOUT - CONSOLE SPECIFIC ========================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --header-height: 64px; --sidebar-width: 260px; --sidebar-width-collapsed: 64px; --panel-width: 420px; --timeline-height: 180px; /* Content area calculations */ --content-max-width: calc(100vw - var(--sidebar-width)); } /* ========================================== LIGHT THEME OVERRIDES ========================================== */ :root[data-theme="light"] { /* Primary Accent - Brighter, more vibrant emerald for light mode */ /* Using emerald-400 as base instead of emerald-500 for a fresher feel */ --emerald-500: rgba(52, 211, 153, 1); /* #34d399 - Brighter primary */ --emerald-600: rgba(16, 185, 129, 1); /* #10b981 - Hover (was primary in dark) */ /* Semantic accent colors - vibrant for light backgrounds */ --color-accent: var(--emerald-500); --color-accent-hover: var(--emerald-600); --color-accent-light: var(--emerald-300); /* Chat user message - brighter emerald for light mode */ --chat-user-bubble-bg: linear-gradient(135deg, var(--emerald-400), var(--emerald-500)); --chat-user-bubble-shadow: 0 2px 12px rgba(52, 211, 153, 0.25); --chat-user-avatar-bg: var(--emerald-400); /* Brand colors (light surfaces + deep text) */ --brand-blue-100: rgba(248, 250, 252, 1); /* #f8fafc */ --brand-blue-200: rgba(241, 245, 249, 1); /* #f1f5f9 */ --brand-blue-300: rgba(228, 234, 242, 1); /* #e4eaf2 */ --brand-blue-400: rgba(210, 219, 231, 1); /* #d2dbe7 */ --brand-blue-500: rgba(246, 248, 251, 1); /* #f6f8fb */ --brand-blue-550: rgba(241, 245, 250, 1); /* #f1f5fa */ --brand-blue-600: rgba(233, 238, 245, 1); /* #e9eef5 */ --brand-blue-700: rgba(15, 23, 42, 1); /* #0f172a */ --brand-blue-700-transparent: rgba(15, 23, 42, 0.85); /* Semantic backgrounds */ --color-bg-primary: var(--brand-blue-500); --color-bg-secondary: var(--brand-blue-550); --color-bg-tertiary: var(--brand-blue-600); --color-bg-card: var(--white); --color-bg-elevated: var(--brand-blue-500); --color-bg-input: var(--brand-blue-200); --color-bg-hover: var(--brand-blue-300); /* Text - WCAG AA+ compliant */ --color-text-primary: rgba(15, 23, 42, 0.95); --color-text-secondary: rgba(51, 65, 85, 0.9); --color-text-tertiary: rgba(71, 85, 105, 0.6); --color-text-muted: rgba(71, 85, 105, 0.9); /* Darker for 5:1+ contrast */ --color-text-placeholder: rgba(148, 163, 184, 1); /* Borders */ --color-border: var(--brand-blue-300); --color-border-primary: rgba(15, 23, 42, 0.08); --color-border-focus: var(--emerald-600); /* Darker for light backgrounds */ /* Glass effects */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-bg-light: rgba(255, 255, 255, 0.9); --glass-bg-hover: rgba(248, 250, 252, 0.95); --glass-bg-solid: rgba(255, 255, 255, 0.98); --glass-bg-card: rgba(255, 255, 255, 0.88); --glass-border: rgba(15, 23, 42, 0.08); --glass-border-hover: rgba(15, 23, 42, 0.12); --glass-border-active: rgba(15, 23, 42, 0.16); --glass-border-accent: rgba(16, 185, 129, 0.25); --glass-bg-strong: rgba(15, 23, 42, 0.06); --glass-border-strong: rgba(15, 23, 42, 0.15); /* Overlay tints (cool glass on light) */ --overlay-white-2: rgba(15, 23, 42, 0.02); --overlay-white-3: rgba(15, 23, 42, 0.03); --overlay-white-4: rgba(15, 23, 42, 0.04); --overlay-white-5: rgba(15, 23, 42, 0.05); --overlay-white-6: rgba(15, 23, 42, 0.06); --overlay-white-7: rgba(15, 23, 42, 0.07); --overlay-white-8: rgba(15, 23, 42, 0.08); --overlay-white-10: rgba(15, 23, 42, 0.1); --overlay-white-12: rgba(15, 23, 42, 0.12); --overlay-white-15: rgba(15, 23, 42, 0.15); --overlay-white-20: rgba(15, 23, 42, 0.2); /* Surface gradients */ --surface-glass-70: rgba(255, 255, 255, 0.7); --surface-glass-86: rgba(255, 255, 255, 0.86); --surface-emerald-86: rgba(236, 253, 245, 0.86); --surface-emerald-90: rgba(236, 253, 245, 0.9); /* Glow effects */ --glow-accent: 0 0 30px rgba(16, 185, 129, 0.14); --glow-accent-strong: 0 0 50px rgba(16, 185, 129, 0.22); --glow-accent-subtle: 0 0 20px rgba(16, 185, 129, 0.1); --glow-gold: 0 0 28px rgba(245, 158, 11, 0.14); --glow-gold-strong: 0 0 42px rgba(245, 158, 11, 0.22); --glow-error: 0 0 24px rgba(239, 68, 68, 0.14); --glow-info: 0 0 24px rgba(59, 130, 246, 0.14); --glow-warning: 0 0 24px rgba(245, 158, 11, 0.14); --glow-purple: 0 0 24px rgba(139, 92, 246, 0.14); --glow-teal: 0 0 24px rgba(20, 184, 166, 0.14); /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.08); --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.15), 0 8px 16px rgba(15, 23, 42, 0.08); --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.08); --shadow-soft-card: 0 6px 18px rgba(15, 23, 42, 0.08); --shadow-elev-1: 0 10px 24px rgba(15, 23, 42, 0.1); --shadow-elev-2: 0 14px 30px rgba(15, 23, 42, 0.12); --shadow-inner-soft: inset 0 1px 0 rgba(255, 255, 255, 0.7); --shadow-inner-dark: inset 0 1px 2px rgba(15, 23, 42, 0.12); --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.08), 0 0 24px rgba(15, 23, 42, 0.04); /* Accent shadows (medium intensity on light) */ --shadow-accent-sm: 0 0 10px rgba(16, 185, 129, 0.28); --shadow-accent-md: 0 6px 16px rgba(16, 185, 129, 0.16); --shadow-accent-lg: 0 10px 22px rgba(16, 185, 129, 0.22); --shadow-accent-xs: 0 0 5px rgba(16, 185, 129, 0.2); --shadow-accent-soft: 0 0 10px rgba(16, 185, 129, 0.14); --shadow-accent-glow: 0 0 14px rgba(16, 185, 129, 0.22); --shadow-accent-focus: 0 0 0 3px rgba(16, 185, 129, 0.12); --shadow-glow: 0 0 18px rgba(16, 185, 129, 0.22); --shadow-glow-gold: 0 0 18px rgba(245, 158, 11, 0.2); /* Focus states - darker for light backgrounds */ --focus-ring-color: var(--emerald-600); --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--color-bg-primary), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); /* Overlay scrims (lighter for light theme) */ --overlay-scrim: rgba(15, 23, 42, 0.4); --overlay-scrim-dark: rgba(15, 23, 42, 0.5); --overlay-scrim-light: rgba(15, 23, 42, 0.25); /* Hero themes (lighter gradients on light surfaces) */ --hero-tasks-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.02) 100%); --hero-tasks-border: rgba(16, 185, 129, 0.18); --hero-tasks-icon-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(52, 211, 153, 0.08) 100%); --hero-okrs-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(45, 212, 191, 0.02) 100%); --hero-okrs-border: rgba(20, 184, 166, 0.18); --hero-okrs-icon-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.18) 0%, rgba(45, 212, 191, 0.08) 100%); --hero-kpis-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.02) 100%); --hero-kpis-border: rgba(245, 158, 11, 0.18); --hero-kpis-icon-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(251, 191, 36, 0.08) 100%); --hero-projects-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.02) 100%); --hero-projects-border: rgba(59, 130, 246, 0.18); --hero-projects-icon-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(96, 165, 250, 0.08) 100%); --hero-sources-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(167, 139, 250, 0.02) 100%); --hero-sources-border: rgba(139, 92, 246, 0.18); --hero-sources-icon-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(167, 139, 250, 0.08) 100%); --hero-strategy-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(129, 140, 248, 0.02) 100%); --hero-strategy-border: rgba(99, 102, 241, 0.18); --hero-strategy-icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(129, 140, 248, 0.08) 100%); --hero-team-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(251, 113, 133, 0.02) 100%); --hero-team-border: rgba(244, 63, 94, 0.18); --hero-team-icon-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.18) 0%, rgba(251, 113, 133, 0.08) 100%); --hero-chat-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.05) 0%, rgba(110, 231, 183, 0.02) 100%); --hero-chat-border: rgba(52, 211, 153, 0.12); --hero-chat-icon-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(110, 231, 183, 0.05) 100%); --hero-homepage-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.02) 100%); --hero-homepage-border: rgba(16, 185, 129, 0.18); --hero-homepage-icon-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(52, 211, 153, 0.08) 100%); --hero-settings-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(148, 163, 184, 0.02) 100%); --hero-settings-border: rgba(100, 116, 139, 0.18); --hero-settings-icon-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.18) 0%, rgba(148, 163, 184, 0.08) 100%); /* ========================================== GLASS ICON BOX - Light Mode STRONGER opacity for visibility on light/white backgrounds Pattern: 0.20 → 0.12 with solid border ========================================== */ /* Purple - Chat/Communication */ --glass-icon-purple: linear-gradient(135deg, rgba(139, 92, 246, 0.20) 0%, rgba(167, 139, 250, 0.12) 100%); --glass-icon-purple-border: rgba(139, 92, 246, 0.40); /* Blue - Calendar/Scheduling */ --glass-icon-blue: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(96, 165, 250, 0.12) 100%); --glass-icon-blue-border: rgba(59, 130, 246, 0.40); /* Indigo - Docs/Strategy */ --glass-icon-indigo: linear-gradient(135deg, rgba(99, 102, 241, 0.20) 0%, rgba(129, 140, 248, 0.12) 100%); --glass-icon-indigo-border: rgba(99, 102, 241, 0.40); /* Teal - Knowledge/SharePoint */ --glass-icon-teal: linear-gradient(135deg, rgba(20, 184, 166, 0.20) 0%, rgba(45, 212, 191, 0.12) 100%); --glass-icon-teal-border: rgba(20, 184, 166, 0.40); /* Emerald - Analytics/Data */ --glass-icon-emerald: linear-gradient(135deg, rgba(16, 185, 129, 0.20) 0%, rgba(52, 211, 153, 0.12) 100%); --glass-icon-emerald-border: rgba(16, 185, 129, 0.40); /* Orange - CRM/Sales */ --glass-icon-orange: linear-gradient(135deg, rgba(249, 115, 22, 0.20) 0%, rgba(251, 146, 60, 0.12) 100%); --glass-icon-orange-border: rgba(249, 115, 22, 0.40); /* Rose - People/Asana */ --glass-icon-rose: linear-gradient(135deg, rgba(244, 63, 94, 0.20) 0%, rgba(251, 113, 133, 0.12) 100%); --glass-icon-rose-border: rgba(244, 63, 94, 0.40); /* Gold - Warnings/Highlights */ --glass-icon-gold: linear-gradient(135deg, rgba(245, 158, 11, 0.20) 0%, rgba(252, 211, 77, 0.12) 100%); --glass-icon-gold-border: rgba(245, 158, 11, 0.40); /* Cyan - AI/Chat */ --glass-icon-cyan: linear-gradient(135deg, rgba(6, 182, 212, 0.20) 0%, rgba(103, 232, 249, 0.12) 100%); --glass-icon-cyan-border: rgba(6, 182, 212, 0.40); } /* ========================================== MOBILE-SPECIFIC VARIABLES ========================================== */ :root { /* Mobile Navigation */ --mobile-header-height: 56px; --mobile-bottom-nav-height: 64px; --mobile-drawer-width: 280px; /* Touch targets (minimum 44px for accessibility) */ --touch-target-min: 44px; --touch-target-comfortable: 48px; /* Mobile spacing */ --mobile-page-padding: 16px; --mobile-card-padding: 16px; --mobile-section-gap: 16px; /* Safe area insets (for notch/home indicator) */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); } /* ========================================== RESPONSIVE BREAKPOINTS ========================================== */ /* Breakpoint strategy: - Mobile: < 640px (phones portrait) - Tablet: 640-1024px (phones landscape, tablets) - Desktop: > 1024px (laptops, desktops) */ /* Tablet */ @media (max-width: 1024px) { :root { --panel-width: 100%; --sidebar-width: 240px; } } /* Mobile */ @media (max-width: 768px) { :root { /* Typography scaling */ --font-size-4xl: 1.875rem; --font-size-3xl: 1.5rem; --font-size-2xl: 1.25rem; /* Layout */ --header-height: var(--mobile-header-height); --sidebar-width: 0px; --timeline-height: 140px; /* Spacing adjustments */ --space-8: 1.5rem; --space-10: 2rem; } } /* Small mobile */ @media (max-width: 480px) { :root { --font-size-3xl: 1.375rem; --font-size-2xl: 1.125rem; --font-size-xl: 1.125rem; --space-6: 1.25rem; --space-8: 1.5rem; --mobile-page-padding: 12px; --mobile-card-padding: 14px; } } /* ========================================== REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-slowest: 0ms; } }