/** * KAIRO Theme System * Dark and Light mode support via CSS custom properties * Apply theme via: or */ /* ═══════════════════════════════════════════════════════════════════════════════ THEME TRANSITION Smooth transition when switching themes ═══════════════════════════════════════════════════════════════════════════════ */ :root { --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } html { transition: var(--theme-transition); } body, .kairo-sidebar, .kairo-header, .kairo-main, .kairo-card, .kairo-modal { transition: var(--theme-transition); } /* ═══════════════════════════════════════════════════════════════════════════════ DARK THEME (Default) Cosmic, quantum-inspired aesthetic ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"], :root { /* Background Depths */ --kairo-void: #0a0a0f; --kairo-deep: #0d0d14; --kairo-surface: #12121a; --kairo-elevated: #1a1a24; --kairo-raised: #22222e; /* Text Colors */ --kairo-text-primary: #f8fafc; --kairo-text-secondary: #94a3b8; --kairo-text-muted: #64748b; --kairo-text-disabled: #475569; /* Borders */ --kairo-border: rgba(255, 255, 255, 0.06); --kairo-border-hover: rgba(255, 255, 255, 0.12); --kairo-border-focus: rgba(6, 182, 212, 0.5); /* Chakra Colors (Accents) */ --kairo-crown: #a855f7; --kairo-third-eye: #6366f1; --kairo-throat: #06b6d4; --kairo-heart: #22c55e; --kairo-solar: #eab308; --kairo-sacral: #f97316; --kairo-root: #ef4444; /* Primary Gradient */ --kairo-gradient: linear-gradient(135deg, var(--kairo-throat) 0%, var(--kairo-crown) 100%); --kairo-gradient-hover: linear-gradient(135deg, #0891b2 0%, #9333ea 100%); /* Glass Morphism */ --glass-bg: rgba(18, 18, 26, 0.8); --glass-bg-light: rgba(26, 26, 38, 0.6); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Glow Effects */ --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3); --glow-purple: 0 0 20px rgba(168, 85, 247, 0.3); --glow-green: 0 0 20px rgba(34, 197, 94, 0.3); --glow-mixed: 0 0 30px rgba(6, 182, 212, 0.2), 0 0 60px rgba(168, 85, 247, 0.15); /* Animated Gradient Tokens */ --gradient-mesh-1: rgba(99, 102, 241, 0.15); --gradient-mesh-2: rgba(139, 92, 246, 0.12); --gradient-mesh-3: rgba(6, 182, 212, 0.10); --gradient-border-from: var(--kairo-throat); --gradient-border-to: var(--kairo-crown); /* Status Colors */ --status-success: #22c55e; --status-warning: #f59e0b; --status-error: #ef4444; --status-info: #3b82f6; /* Sidebar */ --sidebar-bg: rgba(13, 13, 20, 0.95); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-item-hover: rgba(255, 255, 255, 0.05); --sidebar-item-active: rgba(6, 182, 212, 0.15); /* Header */ --header-bg: rgba(13, 13, 20, 0.9); --header-border: rgba(255, 255, 255, 0.06); /* Cards */ --card-bg: rgba(18, 18, 26, 0.8); --card-border: rgba(255, 255, 255, 0.08); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); /* Inputs */ --input-bg: rgba(15, 15, 23, 0.8); --input-border: rgba(255, 255, 255, 0.1); --input-text: #f8fafc; --input-placeholder: #64748b; /* Buttons */ --btn-primary-bg: var(--kairo-gradient); --btn-primary-text: #ffffff; --btn-secondary-bg: rgba(255, 255, 255, 0.1); --btn-secondary-text: #e5e7eb; /* Scrollbar */ --scrollbar-track: rgba(255, 255, 255, 0.02); --scrollbar-thumb: rgba(255, 255, 255, 0.1); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2); /* Cosmic Background */ --cosmic-bg: radial-gradient(ellipse at top, #1a1a2e 0%, #0d0d14 50%, #0a0a0f 100%); --cosmic-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23fff' fill-opacity='0.1'%3E%3Ccircle cx='50' cy='50' r='1'/%3E%3Ccircle cx='150' cy='80' r='0.5'/%3E%3Ccircle cx='250' cy='40' r='1'/%3E%3Ccircle cx='350' cy='90' r='0.5'/%3E%3Ccircle cx='100' cy='150' r='0.5'/%3E%3Ccircle cx='200' cy='120' r='1'/%3E%3Ccircle cx='300' cy='180' r='0.5'/%3E%3Ccircle cx='80' cy='250' r='1'/%3E%3Ccircle cx='180' cy='220' r='0.5'/%3E%3Ccircle cx='280' cy='280' r='1'/%3E%3Ccircle cx='380' cy='240' r='0.5'/%3E%3Ccircle cx='120' cy='350' r='0.5'/%3E%3Ccircle cx='220' cy='320' r='1'/%3E%3Ccircle cx='320' cy='380' r='0.5'/%3E%3C/g%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════════════ LIGHT THEME Clean, professional, medical aesthetic ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Background Depths */ --kairo-void: #ffffff; --kairo-deep: #f8fafc; --kairo-surface: #f1f5f9; --kairo-elevated: #e2e8f0; --kairo-raised: #cbd5e1; /* Text Colors */ --kairo-text-primary: #0f172a; --kairo-text-secondary: #475569; --kairo-text-muted: #64748b; --kairo-text-disabled: #94a3b8; /* Borders */ --kairo-border: rgba(0, 0, 0, 0.08); --kairo-border-hover: rgba(0, 0, 0, 0.15); --kairo-border-focus: rgba(6, 182, 212, 0.5); /* Chakra Colors (Slightly darker for light mode) */ --kairo-crown: #9333ea; --kairo-third-eye: #4f46e5; --kairo-throat: #0891b2; --kairo-heart: #16a34a; --kairo-solar: #ca8a04; --kairo-sacral: #ea580c; --kairo-root: #dc2626; /* Primary Gradient */ --kairo-gradient: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%); --kairo-gradient-hover: linear-gradient(135deg, #0e7490 0%, #6d28d9 100%); /* Glass Morphism (lighter) */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-bg-light: rgba(248, 250, 252, 0.9); --glass-border: rgba(0, 0, 0, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Glow Effects (subtler) */ --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.2); --glow-purple: 0 0 20px rgba(124, 58, 237, 0.2); --glow-green: 0 0 20px rgba(22, 163, 74, 0.2); --glow-mixed: 0 0 20px rgba(6, 182, 212, 0.15), 0 0 40px rgba(124, 58, 237, 0.1); /* Animated Gradient Tokens (subtler for light) */ --gradient-mesh-1: rgba(79, 70, 229, 0.08); --gradient-mesh-2: rgba(124, 58, 237, 0.06); --gradient-mesh-3: rgba(8, 145, 178, 0.05); --gradient-border-from: #0891b2; --gradient-border-to: #7c3aed; /* Status Colors */ --status-success: #16a34a; --status-warning: #d97706; --status-error: #dc2626; --status-info: #2563eb; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-border: rgba(0, 0, 0, 0.08); --sidebar-item-hover: rgba(0, 0, 0, 0.04); --sidebar-item-active: rgba(6, 182, 212, 0.1); /* Header */ --header-bg: rgba(255, 255, 255, 0.95); --header-border: rgba(0, 0, 0, 0.08); /* Cards */ --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.08); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); /* Inputs */ --input-bg: #ffffff; --input-border: rgba(0, 0, 0, 0.15); --input-text: #0f172a; --input-placeholder: #94a3b8; /* Buttons */ --btn-primary-bg: var(--kairo-gradient); --btn-primary-text: #ffffff; --btn-secondary-bg: rgba(0, 0, 0, 0.05); --btn-secondary-text: #374151; /* Scrollbar */ --scrollbar-track: rgba(0, 0, 0, 0.02); --scrollbar-thumb: rgba(0, 0, 0, 0.1); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2); /* Clean Background (no cosmic) */ --cosmic-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); --cosmic-stars: none; } /* ═══════════════════════════════════════════════════════════════════════════════ APPLY THEME VARIABLES TO CORE ELEMENTS ═══════════════════════════════════════════════════════════════════════════════ */ body { background: var(--cosmic-bg); background-image: var(--cosmic-stars); color: var(--kairo-text-primary); } /* Sidebar */ .kairo-sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .kairo-nav-item { color: var(--kairo-text-secondary); } .kairo-nav-item:hover { background: var(--sidebar-item-hover); color: var(--kairo-text-primary); } .kairo-nav-item.active { background: var(--sidebar-item-active); color: var(--kairo-throat); } /* Header */ .kairo-header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .kairo-header-btn { color: var(--kairo-text-secondary); } .kairo-header-btn:hover { color: var(--kairo-text-primary); background: var(--sidebar-item-hover); } /* Cards */ .kairo-card, .bg-slate-800, .bg-slate-900 { background: var(--card-bg) !important; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } /* Inputs */ input, select, textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } input::placeholder, textarea::placeholder { color: var(--input-placeholder); } /* Text utilities */ .text-gray-400, .text-gray-500 { color: var(--kairo-text-muted) !important; } .text-white { color: var(--kairo-text-primary) !important; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ═══════════════════════════════════════════════════════════════════════════════ ACCENT COLOR UTILITIES ═══════════════════════════════════════════════════════════════════════════════ */ .text-cyan-400, .text-cyan-500 { color: var(--kairo-throat) !important; } .text-purple-400, .text-purple-500 { color: var(--kairo-crown) !important; } .text-green-400, .text-green-500 { color: var(--kairo-heart) !important; } .text-yellow-400, .text-yellow-500 { color: var(--kairo-solar) !important; } .text-orange-400, .text-orange-500 { color: var(--kairo-sacral) !important; } .text-red-400, .text-red-500 { color: var(--kairo-root) !important; } .text-indigo-400, .text-indigo-500 { color: var(--kairo-third-eye) !important; } /* Gradient text */ .bg-clip-text.bg-gradient-to-r { background: var(--kairo-gradient); -webkit-background-clip: text; background-clip: text; } /* ═══════════════════════════════════════════════════════════════════════════════ SEMANTIC COLOR ALIASES Map common hardcoded colors to CSS variables for easy migration ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"], :root { /* Slate palette (most common hardcoded colors) */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; /* Zinc/Gray palette */ --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; /* Purple shades */ --purple-300: #d8b4fe; --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea; --purple-700: #7c3aed; /* Violet shades */ --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; /* Indigo shades */ --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; /* Cyan shades */ --cyan-300: #67e8f9; --cyan-400: #22d3ee; --cyan-500: #06b6d4; --cyan-600: #0891b2; /* Green shades */ --green-300: #86efac; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; /* Blue shades */ --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; /* Yellow/Amber shades */ --yellow-400: #facc15; --yellow-500: #eab308; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; /* Orange shades */ --orange-300: #fdba74; --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #ea580c; /* Red shades */ --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; /* Pink shades */ --pink-400: #f472b6; --pink-500: #ec4899; --pink-600: #db2777; /* Surface colors for components */ --surface-dark: #12121a; --surface-darker: #0d0d14; --surface-muted: #1a1a2e; --surface-accent: #2a2a3c; } [data-theme="light"] { /* Override slate for light mode */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Surface colors for light mode */ --surface-dark: #ffffff; --surface-darker: #f8fafc; --surface-muted: #f1f5f9; --surface-accent: #e2e8f0; } /* ═══════════════════════════════════════════════════════════════════════════════ FOCUS STATES ═══════════════════════════════════════════════════════════════════════════════ */ *:focus-visible { outline: 2px solid var(--kairo-throat); outline-offset: 2px; } button:focus-visible, a:focus-visible { outline: 2px solid var(--kairo-throat); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════════ PRINT STYLES ═══════════════════════════════════════════════════════════════════════════════ */ @media print { :root, [data-theme="dark"], [data-theme="light"] { --kairo-void: #ffffff; --kairo-text-primary: #000000; --kairo-text-secondary: #333333; --card-bg: #ffffff; --card-border: #cccccc; } .kairo-sidebar, .kairo-header { display: none !important; } .kairo-main { margin: 0 !important; padding: 20px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ COLOR UTILITY CLASSES Use these instead of hardcoded colors ═══════════════════════════════════════════════════════════════════════════════ */ /* Text Colors - Primary */ .text-primary { color: var(--kairo-text-primary) !important; } .text-secondary { color: var(--kairo-text-secondary) !important; } .text-muted { color: var(--kairo-text-muted) !important; } .text-disabled { color: var(--kairo-text-disabled) !important; } /* Text Colors - Accents */ .text-cyan { color: var(--kairo-throat) !important; } .text-purple { color: var(--kairo-crown) !important; } .text-violet { color: var(--violet-400) !important; } .text-green { color: var(--kairo-heart) !important; } .text-yellow { color: var(--kairo-solar) !important; } .text-orange { color: var(--kairo-sacral) !important; } .text-red { color: var(--kairo-root) !important; } .text-indigo { color: var(--kairo-third-eye) !important; } .text-blue { color: var(--blue-500) !important; } .text-pink { color: var(--pink-500) !important; } /* Background Colors - Surfaces */ .bg-void { background: var(--kairo-void) !important; } .bg-deep { background: var(--kairo-deep) !important; } .bg-surface { background: var(--kairo-surface) !important; } .bg-elevated { background: var(--kairo-elevated) !important; } .bg-raised { background: var(--kairo-raised) !important; } .bg-card { background: var(--card-bg) !important; } .bg-glass { background: var(--glass-bg) !important; } /* Background Colors - Accents (with opacity) */ .bg-cyan-soft { background: rgba(6, 182, 212, 0.15) !important; } .bg-purple-soft { background: rgba(168, 85, 247, 0.15) !important; } .bg-green-soft { background: rgba(34, 197, 94, 0.15) !important; } .bg-yellow-soft { background: rgba(234, 179, 8, 0.15) !important; } .bg-red-soft { background: rgba(239, 68, 68, 0.15) !important; } .bg-blue-soft { background: rgba(59, 130, 246, 0.15) !important; } /* Border Colors */ .border-default { border-color: var(--kairo-border) !important; } .border-hover { border-color: var(--kairo-border-hover) !important; } .border-focus { border-color: var(--kairo-border-focus) !important; } /* Status Colors */ .text-success { color: var(--status-success) !important; } .text-warning { color: var(--status-warning) !important; } .text-error { color: var(--status-error) !important; } .text-info { color: var(--status-info) !important; } .bg-success { background: var(--status-success) !important; } .bg-warning { background: var(--status-warning) !important; } .bg-error { background: var(--status-error) !important; } .bg-info { background: var(--status-info) !important; } /* Gradient Classes */ .bg-gradient-primary { background: var(--kairo-gradient) !important; } .bg-gradient-cosmic { background: var(--cosmic-bg) !important; } /* Glow Effects */ .glow-cyan { box-shadow: var(--glow-cyan) !important; } .glow-purple { box-shadow: var(--glow-purple) !important; } .glow-green { box-shadow: var(--glow-green) !important; } .glow-mixed { box-shadow: var(--glow-mixed) !important; }