/* ============================================================================ CASCABEL THEME SYSTEM ============================================================================ Theme-ready CSS variables for consistent, configurable styling. HOW TO ADD A NEW THEME: 1. Copy the :root variables into a new .theme-[name] class 2. Adjust colors as desired 3. Add class to element: Version: 1.0 Created: 2025-01-09 (Session 29) ============================================================================ */ /* ============================================================================ CSS VARIABLES - Default Theme (Ocean) ============================================================================ */ :root { /* === PRIMARY BRAND === */ --cascabel-primary: #0f766e; --cascabel-primary-light: #14b8a6; --cascabel-primary-dark: #0d5d56; /* === SECONDARY === */ --cascabel-secondary: #1e3a5f; --cascabel-secondary-light: #3b82f6; /* === ACCENT (CTAs, active states) === */ --cascabel-accent: #EF4444; --cascabel-accent-light: #F97316; /* === CHART PALETTE (10 vibrant colors) === */ --chart-1: #3B82F6; /* Blue */ --chart-2: #10B981; /* Emerald */ --chart-3: #F59E0B; /* Amber */ --chart-4: #EF4444; /* Red */ --chart-5: #8B5CF6; /* Violet */ --chart-6: #EC4899; /* Pink */ --chart-7: #14B8A6; /* Teal */ --chart-8: #F97316; /* Orange */ --chart-9: #6366F1; /* Indigo */ --chart-10: #84CC16; /* Lime */ /* === KPI CARDS - Solid Pastel Style === */ --kpi-1-bg: #FEE2E2; /* Spending - Red-100 */ --kpi-1-text: #DC2626; /* Red-600 */ --kpi-1-icon: #EF4444; /* Red-500 */ --kpi-2-bg: #DBEAFE; /* Transactions - Blue-100 */ --kpi-2-text: #2563EB; /* Blue-600 */ --kpi-2-icon: #3B82F6; /* Blue-500 */ --kpi-3-bg: #FEF3C7; /* Average - Amber-100 */ --kpi-3-text: #D97706; /* Amber-600 */ --kpi-3-icon: #F59E0B; /* Amber-500 */ --kpi-4-bg: #E0E7FF; /* Merchants - Indigo-100 */ --kpi-4-text: #4F46E5; /* Indigo-600 */ --kpi-4-icon: #6366F1; /* Indigo-500 */ /* === KPI CARDS - Bordered Style (Alternative) === */ --kpi-border-1: #EF4444; /* Red */ --kpi-border-2: #3B82F6; /* Blue */ --kpi-border-3: #F59E0B; /* Amber */ --kpi-border-4: #6366F1; /* Indigo */ /* === SEMANTIC COLORS === */ --color-positive: #10B981; /* Green - good/decrease spending */ --color-negative: #EF4444; /* Red - bad/increase spending */ --color-warning: #F59E0B; /* Amber - attention */ --color-info: #3B82F6; /* Blue - informational */ --color-neutral: #6B7280; /* Gray - no change */ /* === UI ELEMENTS === */ --header-bg: #0f766e; --toggle-bg: #1e3a5f; --toggle-active-bg: #ffffff; --toggle-active-text: #374151; --toggle-inactive-text: #bfdbfe; --panel-shadow-color: rgba(37, 99, 235, 0.12); /* === BORDER RADIUS === */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ } /* ============================================================================ KPI CARD COMPONENTS ============================================================================ */ /* --- White Card with Bold Icon Circle Style --- */ .kpi-card-1, .kpi-card-2, .kpi-card-3, .kpi-card-4 { background: white !important; border-radius: var(--radius-lg); transition: transform 0.2s ease, box-shadow 0.2s ease; } .kpi-card-1:hover, .kpi-card-2:hover, .kpi-card-3:hover, .kpi-card-4:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px var(--panel-shadow-color); } /* Icon circle - solid colors with white icons */ .kpi-icon-circle { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon-circle i { color: white; font-size: 1.5rem; } .kpi-icon-circle-1 { background: #EF4444; } /* Red */ .kpi-icon-circle-2 { background: #3B82F6; } /* Blue */ .kpi-icon-circle-3 { background: #F59E0B; } /* Amber */ .kpi-icon-circle-4 { background: #8B5CF6; } /* Violet/Purple */ /* KPI value styling */ .kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #1f2937; white-space: nowrap; } .kpi-label { font-size: 0.875rem; font-weight: 500; color: #6b7280; } /* --- Bordered Style (Alternative - kept for flexibility) --- */ .kpi-card-bordered-1 { background: white; border-left: 4px solid var(--kpi-border-1); } .kpi-card-bordered-1 .kpi-icon { color: var(--kpi-border-1); background: rgba(239, 68, 68, 0.1); padding: 0.5rem; border-radius: var(--radius-md); } .kpi-card-bordered-2 { background: white; border-left: 4px solid var(--kpi-border-2); } .kpi-card-bordered-2 .kpi-icon { color: var(--kpi-border-2); background: rgba(59, 130, 246, 0.1); padding: 0.5rem; border-radius: var(--radius-md); } .kpi-card-bordered-3 { background: white; border-left: 4px solid var(--kpi-border-3); } .kpi-card-bordered-3 .kpi-icon { color: var(--kpi-border-3); background: rgba(245, 158, 11, 0.1); padding: 0.5rem; border-radius: var(--radius-md); } .kpi-card-bordered-4 { background: white; border-left: 4px solid var(--kpi-border-4); } .kpi-card-bordered-4 .kpi-icon { color: var(--kpi-border-4); background: rgba(99, 102, 241, 0.1); padding: 0.5rem; border-radius: var(--radius-md); } /* ============================================================================ CHART ENHANCEMENTS ============================================================================ */ /* Chart container with subtle shadow */ .chart-panel { background: white; border-radius: var(--radius-lg); box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08), 0 12px 35px -5px var(--panel-shadow-color); border: 1px solid rgba(255, 255, 255, 0.6); } /* ============================================================================ THEME VARIANTS (Future Use) ============================================================================ */ /* --- Theme: Sunset --- */ /* .theme-sunset { --cascabel-primary: #F97316; --cascabel-primary-light: #FB923C; --cascabel-primary-dark: #EA580C; --cascabel-secondary: #EC4899; --cascabel-secondary-light: #F472B6; --header-bg: #F97316; --chart-1: #F97316; --chart-2: #EC4899; --chart-3: #14B8A6; --chart-4: #8B5CF6; --chart-5: #3B82F6; --chart-6: #84CC16; --chart-7: #EF4444; --chart-8: #F59E0B; --chart-9: #6366F1; --chart-10: #10B981; --kpi-1-bg: #FFEDD5; --kpi-1-text: #C2410C; --kpi-1-icon: #F97316; } */ /* --- Theme: Forest --- */ /* .theme-forest { --cascabel-primary: #10B981; --cascabel-primary-light: #34D399; --cascabel-primary-dark: #059669; --header-bg: #10B981; --chart-1: #10B981; --chart-2: #84CC16; --chart-3: #F59E0B; --chart-4: #14B8A6; --chart-5: #3B82F6; ... } */ /* --- Theme: Berry --- */ /* .theme-berry { --cascabel-primary: #8B5CF6; --cascabel-primary-light: #A78BFA; --cascabel-primary-dark: #7C3AED; --header-bg: #8B5CF6; --chart-1: #8B5CF6; --chart-2: #EC4899; --chart-3: #3B82F6; ... } */ /* ============================================================================ AI INSIGHT CARD COMPONENT ============================================================================ */ .ai-insight-card { background: linear-gradient(to right, #dbeafe, #bfdbfe); /* Medium blue gradient */ /* background: linear-gradient(to right, #dbeafe, #60a7fc); /* Medium blue gradient */ border-left: 4px solid var(--cascabel-primary); border-radius: var(--radius-lg); } /* Icon circle - outline style (distinct from KPI cards) */ .ai-icon-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: 2px solid #3B82F6; } .ai-icon-circle i { color: #3B82F6; font-size: 0.875rem; } /* Title styling */ .ai-title { font-size: 0.875rem; font-weight: 600; color: #1f2937; /* Dark gray/black */ } /* Toggle switch - use blue instead of teal */ .ai-toggle-on { background-color: #3B82F6; } .ai-toggle-off { background-color: #9CA3AF; } /* Loading dots animation */ .ai-loading-dot { animation: ai-pulse-dot 1.4s ease-in-out infinite; } .ai-loading-dot:nth-child(2) { animation-delay: 0.2s; } .ai-loading-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes ai-pulse-dot { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* Rotate animation for regenerate button */ .ai-regenerating { animation: ai-spin 1s linear infinite; } @keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Markdown content styling */ .ai-content strong { font-weight: 600; color: #1e40af; /* Blue-800 */ } .ai-content ul, .ai-content ol { margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .ai-content li { margin-bottom: 0.25rem; } /* Cached badge */ .ai-cached-badge { font-size: 0.75rem; color: #3B82F6; background: #DBEAFE; padding: 0.125rem 0.5rem; border-radius: 9999px; } /* Action buttons */ .ai-action-btn { color: #3B82F6; transition: color 0.15s ease; } .ai-action-btn:hover { color: #1D4ED8; }