/**
 * Theme CSS Variables
 *
 * This file defines all color variables for light and dark modes.
 * Components should use these variables instead of hardcoded colors.
 */

:root {
  /* ===== BACKGROUNDS ===== */
  --bg-primary: #ffffff;           /* Main page background */
  --bg-secondary: #f9fafb;         /* Cards, sections (combines #f8fafc, #fafbfc) */
  --bg-tertiary: #f3f4f6;          /* Subtle backgrounds (combines #f1f5f9, #f0f0f0, #f5f5f5) */
  --bg-muted: #e5e7eb;             /* Disabled, muted backgrounds */
  --bg-input: #ffffff;             /* Form inputs */
  --bg-hover: #f0f0f0;             /* Hover states */
  --bg-overlay: rgba(0, 0, 0, 0.5); /* Modal overlays */

  /* ===== TEXT ===== */
  --text-primary: #111827;         /* Main text (combines #222, #1f2937, #111827) */
  --text-secondary: #4b5563;       /* Secondary text (combines #374151, #555) */
  --text-muted: #6b7280;           /* Muted text (combines #666, #64748b) */
  --text-tertiary: #9ca3af;        /* Tertiary/placeholder text (combines #94a3b8) */
  --text-inverse: #ffffff;         /* Text on dark backgrounds */

  /* ===== BORDERS ===== */
  --border-primary: #e5e7eb;       /* Main borders (combines #e2e8f0) */
  --border-secondary: #d1d5db;     /* Stronger borders (combines #cbd5e1, #ddd) */
  --border-focus: #3245ff;         /* Focus ring color */
  --border-input: #d1d5db;         /* Input borders */

  /* ===== BRAND COLORS ===== */
  --color-primary: #3245ff;        /* Main brand blue */
  --color-primary-hover: #2030cc;  /* Primary hover state */
  --color-primary-light: #e0e7ff;  /* Light primary background */
  --color-secondary: #bc52ee;      /* Brand purple */
  --color-secondary-hover: #a041d4;
  --color-gradient: linear-gradient(90deg, #3245ff 0%, #bc52ee 100%);
  --color-gradient-reverse: linear-gradient(90deg, #bc52ee 0%, #3245ff 100%);

  /* ===== SEMANTIC COLORS ===== */
  /* Success (greens) */
  --color-success: #059669;
  --color-success-light: #10b981;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text: #065f46;

  /* Warning (oranges/yellows) */
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;

  /* Error (reds) */
  --color-error: #dc2626;
  --color-error-light: #ef4444;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;

  /* Info (blues) */
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-text: #1e40af;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-card-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 12px rgba(50, 69, 255, 0.3);
  --shadow-primary-sm: 0 4px 12px rgba(50, 69, 255, 0.1);
  --shadow-primary-lg: 0 4px 20px rgba(50, 69, 255, 0.15);
  --border-subtle: rgba(0, 0, 0, 0.1);
  --border-subtle-strong: rgba(0, 0, 0, 0.15);
  --focus-ring: 0 0 0 4px rgba(50, 69, 255, 0.1);
  --focus-ring-strong: 0 0 0 4px rgba(50, 69, 255, 0.2);

  /* Interactive element backgrounds */
  --bg-success-hover: rgba(34, 197, 94, 0.15);
  --bg-success-active: rgba(34, 197, 94, 0.25);
  --bg-warning-hover: rgba(245, 158, 11, 0.15);
  --bg-warning-active: rgba(245, 158, 11, 0.25);
  --bg-info-hover: rgba(59, 130, 246, 0.15);
  --bg-info-active: rgba(59, 130, 246, 0.25);
  --bg-neutral-hover: rgba(156, 163, 175, 0.15);
  --bg-neutral-active: rgba(156, 163, 175, 0.25);

  /* ===== CHART COLORS ===== */
  --chart-grid: #e5e7eb;
  --chart-axis: #9ca3af;
  --chart-line-primary: #3245ff;
  --chart-line-secondary: #bc52ee;
  --chart-area-primary: rgba(50, 69, 255, 0.1);
  --chart-area-secondary: rgba(188, 82, 238, 0.1);
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-border: #e5e7eb;

  /* ===== PREMIUM/PORTFOLIO SHADOWS ===== */
  /* Consolidated shadow system - 2 levels per category */
  --shadow-card-premium: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-card-premium-hover: 0 15px 40px rgba(15, 23, 42, 0.08);
  --shadow-primary-glow: 0 6px 20px rgba(99, 102, 241, 0.4);  /* CTAs only */
  --shadow-primary-subtle: 0 4px 12px rgba(50, 69, 255, 0.15);
  --shadow-info-sm: 0 2px 8px rgba(59, 130, 246, 0.15);
  --shadow-info-lg: 0 6px 16px rgba(59, 130, 246, 0.35);
  --shadow-success-sm: 0 2px 8px rgba(16, 185, 129, 0.2);
  --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
  --shadow-warning-sm: 0 4px 12px rgba(245, 158, 11, 0.15);
  --shadow-gold-lg: 0 4px 12px rgba(251, 191, 36, 0.4);
  --shadow-silver-lg: 0 4px 12px rgba(148, 163, 184, 0.4);
  --shadow-bronze-lg: 0 4px 12px rgba(217, 119, 6, 0.4);
  --shadow-filter-sm: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  --shadow-filter-md: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  --shadow-progress-lime: 0 2px 4px rgba(132, 204, 22, 0.2);
  --shadow-progress-green: 0 2px 4px rgba(34, 197, 94, 0.25);
  --shadow-progress-emerald: 0 2px 4px rgba(22, 163, 74, 0.3);

  /* ===== PREMIUM/PORTFOLIO BACKGROUNDS ===== */
  /* Consolidated background system - 1-2 levels per color */
  --bg-primary-subtle: rgba(50, 69, 255, 0.08);
  --bg-secondary-subtle: rgba(188, 82, 238, 0.08);
  --bg-info-subtle: rgba(59, 130, 246, 0.1);
  --bg-info-subtle-hover: rgba(59, 130, 246, 0.15);
  --bg-slate-soft: rgba(226, 232, 240, 0.5);
  --bg-slate-border: rgba(226, 232, 240, 0.6);
  --bg-neutral-soft: rgba(0, 0, 0, 0.05);

  /* Status indicator backgrounds */
  --bg-status-success: rgba(22, 163, 74, 0.15);
  --bg-status-success-light: rgba(132, 204, 22, 0.15);
  --bg-status-warning: rgba(234, 179, 8, 0.15);
  --bg-status-warning-strong: rgba(249, 115, 22, 0.15);
  --bg-status-error: rgba(220, 38, 38, 0.15);
  --bg-mode-conservative: rgba(22, 163, 74, 0.08);
  --bg-mode-aggressive: rgba(249, 115, 22, 0.08);
  --bg-mode-balanced: rgba(59, 130, 246, 0.08);
  --bg-range-info: rgba(59, 130, 246, 0.1);
  --bg-range-info-hover: rgba(59, 130, 246, 0.2);
  --bg-range-warning: rgba(245, 158, 11, 0.1);
  --bg-range-warning-hover: rgba(245, 158, 11, 0.2);
  --bg-range-success: rgba(5, 150, 105, 0.1);
  --bg-range-success-hover: rgba(5, 150, 105, 0.2);

  /* Premium borders */
  --border-primary-soft: rgba(50, 69, 255, 0.3);
  --border-info-soft: rgba(59, 130, 246, 0.5);
  --border-gold-soft: rgba(251, 191, 36, 0.3);
  --border-silver-soft: rgba(148, 163, 184, 0.3);
  --border-bronze-soft: rgba(217, 119, 6, 0.3);
  --border-gold-bg-start: rgba(251, 191, 36, 0.15);
  --border-gold-bg-end: rgba(245, 158, 11, 0.08);
  --border-silver-bg-start: rgba(148, 163, 184, 0.15);
  --border-silver-bg-end: rgba(100, 116, 139, 0.08);
  --border-bronze-bg-start: rgba(217, 119, 6, 0.15);
  --border-bronze-bg-end: rgba(180, 83, 9, 0.08);

  /* ===== GRADIENT COLORS (for linear-gradients) ===== */
  /* Premium header bars */
  --gradient-premium-bar: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-premium-bar-alt: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 33%, #ec4899 66%, #f59e0b 100%);
  --gradient-premium-purple: linear-gradient(90deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  --gradient-info-bar: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  --gradient-sector-bar: linear-gradient(90deg, #3b82f6 0%, #10b981 50%, #f59e0b 100%);
  --gradient-region-bar: linear-gradient(90deg, #06B6D4 0%, #3B82F6 50%, #8B5CF6 100%);
  --gradient-liquidity-bar: linear-gradient(90deg, #16a34a 0%, #eab308 50%, #dc2626 100%);
  --gradient-allocation-bar: linear-gradient(90deg, #3B82F6 0%, #10B981 33%, #F59E0B 66%, #EC4899 100%);
  --gradient-asset-bar: linear-gradient(90deg, #06B6D4 0%, #3B82F6 33%, #8B5CF6 66%, #22C55E 100%);
  --gradient-warning-bar: linear-gradient(90deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
  --gradient-risk-bar: linear-gradient(90deg, #10b981 0%, #3b82f6 33%, #f59e0b 66%, #ef4444 100%);

  /* Card backgrounds */
  --gradient-card-light: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-card-primary: linear-gradient(135deg, #F3F4FF 0%, #E8EAFF 100%);
  --gradient-card-crypto: linear-gradient(135deg, #F9FAFB 0%, #ECFEFF 100%);
  --gradient-card-premium: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);

  /* Button gradients */
  --gradient-btn-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-btn-brand: linear-gradient(135deg, #3245ff 0%, #5865ff 100%);
  --gradient-btn-brand-hover: linear-gradient(135deg, #2a3ceb 0%, #4956f0 100%);
  --gradient-btn-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-btn-success-hover: linear-gradient(135deg, #059669 0%, #047857 100%);
  --gradient-btn-warning: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);

  /* Progress/milestone gradients */
  --gradient-progress-low: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
  --gradient-progress-medium: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-progress-high: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  --gradient-milestone-1: linear-gradient(135deg, #d9f99d 0%, #bef264 100%);
  --gradient-milestone-2: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
  --gradient-milestone-3: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --gradient-milestone-pending: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);

  /* Trophy/badge gradients */
  --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --gradient-silver: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  --gradient-bronze: linear-gradient(135deg, #d97706 0%, #b45309 100%);

  /* Text gradients */
  --gradient-title-dark: linear-gradient(135deg, #1e293b 0%, #475569 100%);

  /* ===== CODE BLOCKS ===== */
  --bg-code-block: #1e293b;
  --text-code-block: #e2e8f0;

  /* ===== BORDER RADIUS ===== */
  /* Standardized radius system - use these everywhere */
  --radius-xs: 2px;      /* Dots, small indicators */
  --radius-sm: 4px;      /* Progress bars, tiny elements */
  --radius-md: 8px;      /* Buttons, inputs, small cards */
  --radius-lg: 12px;     /* Standard cards, sections */
  --radius-xl: 16px;     /* Large cards, modals */
  --radius-2xl: 20px;    /* Premium cards, hero elements */
  --radius-full: 9999px; /* Pills, badges, circular */

  /* ===== MISC ===== */
  --nav-height: 64px;
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}

/* ===== DARK MODE ===== */
html.dark {
  color-scheme: dark;

  /* Backgrounds */
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #252538;
  --bg-muted: #3d3d5c;
  --bg-input: #252538;
  --bg-hover: #2d2d44;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0f0f1a;

  /* Borders */
  --border-primary: #3d3d5c;
  --border-secondary: #4d4d6a;
  --border-input: #4d4d6a;

  /* Brand colors - slightly brighter for dark mode */
  --color-primary: #5b6aff;
  --color-primary-hover: #7580ff;
  --color-primary-light: #1e2a5e;
  --color-secondary: #d070ff;
  --color-secondary-hover: #e090ff;

  /* Semantic colors - darker backgrounds, adjusted for contrast */
  --color-success-bg: #052e1f;
  --color-success-border: #065f46;
  --color-success-text: #6ee7b7;

  --color-warning-bg: #422006;
  --color-warning-border: #92400e;
  --color-warning-text: #fcd34d;

  --color-error-bg: #2d0a0a;
  --color-error-border: #991b1b;
  --color-error-text: #fca5a5;

  --color-info-bg: #0a1a3d;
  --color-info-border: #1e40af;
  --color-info-text: #93c5fd;

  /* Shadows - more prominent in dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-card-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-primary: 0 4px 12px rgba(91, 106, 255, 0.4);
  --shadow-primary-sm: 0 4px 12px rgba(91, 106, 255, 0.2);
  --shadow-primary-lg: 0 4px 20px rgba(91, 106, 255, 0.25);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-subtle-strong: rgba(255, 255, 255, 0.15);
  --focus-ring: 0 0 0 4px rgba(91, 106, 255, 0.2);
  --focus-ring-strong: 0 0 0 4px rgba(91, 106, 255, 0.3);

  /* Interactive element backgrounds - darker for dark mode */
  --bg-success-hover: rgba(34, 197, 94, 0.2);
  --bg-success-active: rgba(34, 197, 94, 0.3);
  --bg-warning-hover: rgba(245, 158, 11, 0.2);
  --bg-warning-active: rgba(245, 158, 11, 0.3);
  --bg-info-hover: rgba(59, 130, 246, 0.2);
  --bg-info-active: rgba(59, 130, 246, 0.3);
  --bg-neutral-hover: rgba(156, 163, 175, 0.2);
  --bg-neutral-active: rgba(156, 163, 175, 0.3);

  /* Charts */
  --chart-grid: #3d3d5c;
  --chart-axis: #64748b;
  --chart-area-primary: rgba(91, 106, 255, 0.15);
  --chart-area-secondary: rgba(208, 112, 255, 0.15);
  --chart-tooltip-bg: #1a1a2e;
  --chart-tooltip-border: #3d3d5c;

  /* Premium/Portfolio Shadows - Consolidated */
  --shadow-card-premium: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-card-premium-hover: 0 15px 40px rgba(0, 0, 0, 0.4);
  --shadow-primary-glow: 0 6px 20px rgba(139, 92, 246, 0.5);
  --shadow-primary-subtle: 0 4px 12px rgba(91, 106, 255, 0.25);
  --shadow-info-sm: 0 2px 8px rgba(59, 130, 246, 0.25);
  --shadow-info-lg: 0 6px 16px rgba(59, 130, 246, 0.45);
  --shadow-success-sm: 0 2px 8px rgba(16, 185, 129, 0.3);
  --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.4);
  --shadow-warning-sm: 0 4px 12px rgba(245, 158, 11, 0.25);
  --shadow-gold-lg: 0 4px 12px rgba(251, 191, 36, 0.5);
  --shadow-silver-lg: 0 4px 12px rgba(148, 163, 184, 0.5);
  --shadow-bronze-lg: 0 4px 12px rgba(217, 119, 6, 0.5);
  --shadow-filter-sm: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  --shadow-filter-md: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  --shadow-progress-lime: 0 2px 4px rgba(132, 204, 22, 0.3);
  --shadow-progress-green: 0 2px 4px rgba(34, 197, 94, 0.35);
  --shadow-progress-emerald: 0 2px 4px rgba(22, 163, 74, 0.4);

  /* Premium/Portfolio Backgrounds - Consolidated */
  --bg-primary-subtle: rgba(91, 106, 255, 0.12);
  --bg-secondary-subtle: rgba(208, 112, 255, 0.12);
  --bg-info-subtle: rgba(59, 130, 246, 0.15);
  --bg-info-subtle-hover: rgba(59, 130, 246, 0.2);
  --bg-slate-soft: rgba(51, 65, 85, 0.5);
  --bg-slate-border: rgba(51, 65, 85, 0.6);
  --bg-neutral-soft: rgba(255, 255, 255, 0.05);

  /* Status indicator backgrounds */
  --bg-status-success: rgba(22, 163, 74, 0.2);
  --bg-status-success-light: rgba(132, 204, 22, 0.2);
  --bg-status-warning: rgba(234, 179, 8, 0.2);
  --bg-status-warning-strong: rgba(249, 115, 22, 0.2);
  --bg-status-error: rgba(220, 38, 38, 0.2);
  --bg-mode-conservative: rgba(22, 163, 74, 0.12);
  --bg-mode-aggressive: rgba(249, 115, 22, 0.12);
  --bg-mode-balanced: rgba(59, 130, 246, 0.12);
  --bg-range-info: rgba(59, 130, 246, 0.15);
  --bg-range-info-hover: rgba(59, 130, 246, 0.25);
  --bg-range-warning: rgba(245, 158, 11, 0.15);
  --bg-range-warning-hover: rgba(245, 158, 11, 0.25);
  --bg-range-success: rgba(5, 150, 105, 0.15);
  --bg-range-success-hover: rgba(5, 150, 105, 0.25);

  /* Premium borders */
  --border-primary-soft: rgba(91, 106, 255, 0.4);
  --border-info-soft: rgba(59, 130, 246, 0.6);
  --border-gold-soft: rgba(251, 191, 36, 0.4);
  --border-silver-soft: rgba(148, 163, 184, 0.4);
  --border-bronze-soft: rgba(217, 119, 6, 0.4);
  --border-gold-bg-start: rgba(251, 191, 36, 0.2);
  --border-gold-bg-end: rgba(245, 158, 11, 0.12);
  --border-silver-bg-start: rgba(148, 163, 184, 0.2);
  --border-silver-bg-end: rgba(100, 116, 139, 0.12);
  --border-bronze-bg-start: rgba(217, 119, 6, 0.2);
  --border-bronze-bg-end: rgba(180, 83, 9, 0.12);

  /* Gradients - brighter for dark mode */
  --gradient-card-light: linear-gradient(135deg, #1a1a2e 0%, #252538 100%);
  --gradient-card-primary: linear-gradient(135deg, #1e2a5e 0%, #252550 100%);
  --gradient-card-crypto: linear-gradient(135deg, #1a1a2e 0%, #1a2535 100%);
  --gradient-card-premium: linear-gradient(135deg, #1e1e35 0%, #252540 100%);
  --gradient-title-dark: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);

  /* Code blocks - slightly lighter for dark mode contrast */
  --bg-code-block: #1e293b;
  --text-code-block: #e2e8f0;
}

/* ===== THEME TRANSITION ===== */
/* Smooth transition when toggling themes (disabled on initial load) */
html:not(.no-transition) {
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

html:not(.no-transition) *,
html:not(.no-transition) *::before,
html:not(.no-transition) *::after {
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* Disable transitions for elements that shouldn't animate */
html:not(.no-transition) img,
html:not(.no-transition) svg,
html:not(.no-transition) video {
  transition: none;
}