/* Design System Variables - Matching iOS Broc Colors Exactly */

:root {
  --zoom-factor: 0.9;
  /* ===== BROKERLY BRAND COLORS (Adaptive for Light/Dark Mode) ===== */

  /* Primary brand colors - sophisticated blue with financial trust */
  --brokerly-primary: #1A7FE6;
  --brokerly-primary-dark: #0D4F8C;
  --brokerly-primary-light: rgba(26, 127, 230, 0.08);
  --brokerly-primary-lighter: rgba(26, 127, 230, 0.04);
  --view-max-width: 840px;

  /* Secondary brand colors */
  --brokerly-secondary: #4A9EFF;
  --brokerly-accent: #FF6B6B;
  --brokerly-accent-light: rgba(255, 107, 107, 0.1);

  /* Neon accent colors for interactive elements */
  --brokerly-neon-accent: #FF4081;
  --brokerly-neon-glow: rgba(255, 64, 129, 0.3);

  /* Premium colors */
  --brokerly-gold: #E6B800;
  --brokerly-warm-green: #22c55e;
  --brokerly-warm-red: #E63333;
  --brokerly-warm-teal: #1AB3A6;
  --brokerly-accent-green: #84cc16; /* Vibrant Lime/Acid Green Accent */
  --brokerly-backdrop-bg: rgba(15, 23, 42, 0.15);

  /* Comparison Card colors (Light Violet) */
  --comparison-bg: #EDE9FE;
  --comparison-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.12) 100%);
  --comparison-text-primary: #111827;
  --comparison-text-secondary: #475569;
  --comparison-border: rgba(139, 92, 246, 0.22);
  --comparison-savings: #4338ca;
  --dashboard-bg-start: #FFFFFF;
  --dashboard-bg-end: #F8FAFC;
  --theme-urgent-bg: #FEF2F2;
  --theme-high-bg: #FFFBEB;
  --theme-medium-bg: #F0FDF4;
  --theme-low-bg: #F8FAFC;
  --theme-urgent-text: #991b1b;
  --theme-high-text: #92400e;
  --theme-medium-text: #166534;
  --theme-low-text: #1e293b;
  --comparison-accent: #7c3aed;
  --comparison-accent-light: rgba(139, 92, 246, 0.12);
  --comparison-card-inner-bg: rgba(139, 92, 246, 0.05);

  /* Alert Card colors (Warm Coral) */
  --alert-bg: #FFF1ED;
  --alert-gradient: linear-gradient(135deg, rgba(230, 97, 82, 0.06) 0%, rgba(255, 107, 107, 0.10) 100%);
  --alert-text-primary: #1a0a07;
  --alert-text-secondary: #6b3a30;
  --alert-border: rgba(230, 97, 82, 0.18);
  --alert-accent: #E66152;
  --alert-accent-light: rgba(230, 97, 82, 0.10);

  /* Insight Card colors (Fresh Mint) */
  --insight-bg: #E1F1E8;
  --insight-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(52, 211, 153, 0.10) 100%);
  --insight-text-primary: #064e3b;
  --insight-text-secondary: #1c6e4a;
  --insight-border: rgba(16, 185, 129, 0.18);
  --insight-accent: #10B981;
  --insight-accent-light: rgba(16, 185, 129, 0.10);

  /* Quick Action Card colors (Soft Blue) */
  --quick-bg: #D9E9FF;
  --quick-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(96, 165, 250, 0.10) 100%);
  --quick-text-primary: #0c2d5a;
  --quick-text-secondary: #1e4f8a;
  --quick-border: rgba(59, 130, 246, 0.18);
  --quick-accent: #3B82F6;
  --quick-accent-light: rgba(59, 130, 246, 0.10);

  /* ===== BACKGROUND COLORS (Adaptive) ===== */

  /* Primary background - premium app foundation */
  --brokerly-background: #F8F9FA;
  --brokerly-secondary-background: #FFFFFF;
  --brokerly-tertiary-background: #E9ECEF;
  --brokerly-header-background: #F1F3F4;

  /* Enhanced contrast backgrounds */
  --brokerly-card-background: #FFFFFF;
  --brokerly-section-background: #F8F9FA;
  --brokerly-input-background: #FFFFFF;
  --brokerly-border-subtle: #E9ECEF;
  --brokerly-border-medium: #DEE2E6;

  /* Modern card background */
  --modern-card-background: #FFFFFF;

  /* ===== TEXT COLORS (Adaptive) ===== */

  --brokerly-text-primary: #000000;
  --brokerly-text-secondary: #666666;
  --brokerly-text-tertiary: #999999;
  --brokerly-text-quaternary: #CCCCCC;

  /* ===== BORDER AND SHADOW COLORS ===== */

  --brokerly-border: rgba(0, 0, 0, 0.1);
  --brokerly-border-light: rgba(0, 0, 0, 0.05);
  --brokerly-primary-shadow: rgba(26, 127, 230, 0.15);
  --brokerly-card-shadow: rgba(0, 0, 0, 0.08);

  /* ===== STATUS COLORS ===== */

  --brokerly-success: #1AB359;
  --brokerly-warning: #FF9500;
  --brokerly-danger: #FF3B30;
  --brokerly-info: #1A7FE6;

  /* ===== ACTION CARD CATEGORY COLORS ===== */

  /* Urgent - Coral */
  --action-urgent: #FF6F61;
  --action-urgent-light: rgba(255, 111, 97, 0.1);
  --action-urgent-gradient: linear-gradient(135deg, #FF6F61 0%, #E6574D 100%);

  /* High - Gold */
  --action-high: #FFD700;
  --action-high-light: rgba(255, 215, 0, 0.1);
  --action-high-gradient: linear-gradient(135deg, #FFD700 0%, #E6C200 100%);

  /* Medium - Emerald */
  --action-medium: #50C878;
  --action-medium-light: rgba(80, 200, 120, 0.1);
  --action-medium-gradient: linear-gradient(135deg, #50C878 0%, #47B36B 100%);

  /* Low - Cerulean Blue */
  --action-low: #009ED9;
  --action-low-light: rgba(0, 158, 217, 0.1);
  --action-low-gradient: linear-gradient(135deg, #009ED9 0%, #008BC2 100%);

  /* ===== TYPOGRAPHY SCALE ===== */

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== SPACING SCALE ===== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ===== BORDER RADIUS ===== */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-high: 0 16px 40px rgba(0, 0, 0, 0.16), 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-premium: 0 12px 32px rgba(26, 127, 230, 0.2);

  /* ===== GRADIENTS ===== */

  --gradient-primary: linear-gradient(135deg, var(--brokerly-primary) 0%, var(--brokerly-primary-dark) 100%);
  --gradient-premium: linear-gradient(135deg, var(--brokerly-gold) 0%, #CC9900 100%);
  --gradient-success: linear-gradient(135deg, var(--brokerly-warm-green) 0%, #159947 100%);
  --gradient-neon: linear-gradient(135deg, var(--brokerly-neon-accent) 0%, #E91E63 100%);
  --gradient-card: linear-gradient(135deg, var(--modern-card-background) 0%, rgba(26, 127, 230, 0.02) 100%);

  /* ===== TRANSITIONS ===== */

  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Z-INDEX SCALE ===== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 100;
  --z-fixed: 100;
  --z-tab-navigation: 100;
  --z-sheet-backdrop: 11000;
  --z-sheet-content: 11001;
  --z-modal-backdrop: 12000;
  --z-modal: 12001;
  --z-popover: 12002;
  --z-tooltip: 12003;
  --z-toast: 12004;

  /* ===== BREAKPOINTS (for JavaScript usage) ===== */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ===== ANIMATION DURATIONS ===== */

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;

  /* ===== COMPONENT SPECIFIC VARIABLES ===== */

  /* Tab navigation */
  --tab-height: 80px;
  --tab-icon-size: 24px;

  /* Cards */
  --card-padding: var(--spacing-lg);
  --card-border-radius: var(--radius-lg);

  /* Buttons */
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;
  --button-padding-x: var(--spacing-lg);

  /* Inputs */
  --input-height: 48px;
  --input-padding-x: var(--spacing-md);
  --input-border-radius: var(--radius-md);

  /* AI Avatar */
  --ai-avatar-size: 40px;
  --ai-avatar-border-width: 2px;

  /* ===== AI ASSISTANT SIGNATURE COLORS ===== */

  /* Clive - Option 1: Midnight Indigo (Warm Luxury Theme) */
  --clive-gradient: linear-gradient(135deg, #312E81 0%, #4F46E5 100%);
  --clive-primary: #4F46E5;
  --clive-primary-rgb: 79, 70, 229;
  --clive-secondary: #312E81;
  --clive-secondary-light: rgba(49, 46, 129, 0.1);
  --clive-glow: rgba(79, 70, 229, 0.2);
  --clive-light: rgba(79, 70, 229, 0.1);
  --clive-strong-highlight: #FFFFFF;

  /* Clara - Dusty Sage (Muted Green Intelligence Theme) */
  --clara-gradient: linear-gradient(135deg, #6D8F7B 0%, #8FB5A0 50%, #AECDB9 100%);
  --clara-primary: #8FB5A0;
  --clara-primary-rgb: 143, 181, 160;
  --clara-secondary: #6D8F7B;
  --clara-secondary-light: rgba(109, 143, 123, 0.1);
  --clara-glow: rgba(143, 181, 160, 0.2);
  --clara-light: rgba(143, 181, 160, 0.1);
  --clara-strong-highlight: #F0F5F2;
}

/* ===== DARK MODE — AUTO (System Preference) =====
 * This block activates when the user's OS is set to dark mode.
 * Uses :not([data-theme="light"]) so it can be overridden by an explicit light-mode toggle.
 * ⚠️  Keep variable values in sync with the manual toggle block below.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Primary brand colors - Vibrant Neon Lime Green */
    --brokerly-primary: #bdf038;
    --brokerly-primary-dark: #a3d420;
    --brokerly-primary-light: rgba(189, 240, 56, 0.15);
    --brokerly-primary-lighter: rgba(189, 240, 56, 0.06);

    /* Background colors - Sleek Jet Black & Deep Charcoal */
    --brokerly-background: #08080a;
    --brokerly-secondary-background: #0e0e12;
    --brokerly-backdrop-bg: rgba(0, 0, 0, 0.85);
    --brokerly-tertiary-background: #13141a;
    --brokerly-header-background: rgba(8, 8, 10, 0.85);

    /* Modern card background - Premium deep charcoal */
    --modern-card-background: #141419;

    /* Enhanced contrast backgrounds for dark mode content areas */
    --brokerly-card-background: #141419;
    --brokerly-section-background: #0e0e12;
    --brokerly-input-background: #1a1a22;
    --brokerly-border-subtle: rgba(255, 255, 255, 0.06);
    --brokerly-border-medium: rgba(255, 255, 255, 0.15);

    /* Text colors - Elevated high-contrast greys & crisp whites */
    --brokerly-text-primary: #f8fafc;
    --brokerly-text-secondary: #94a3b8;
    --brokerly-text-tertiary: #64748b;
    --brokerly-text-quaternary: #334155;

    /* Border and shadow colors */
    --brokerly-border: rgba(255, 255, 255, 0.08);
    --brokerly-border-light: rgba(255, 255, 255, 0.04);
    --brokerly-primary-shadow: rgba(189, 240, 56, 0.2);
    --brokerly-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);

    /* Premium colors adjusted for dark mode */
    --brokerly-gold: #ffd700;
    --brokerly-warm-green: #adff2f;
    --brokerly-warm-red: #ff3b30;
    --brokerly-warm-teal: #00e5ff;
    --brokerly-accent-green: #bdf038; /* Neon Acid Green Accent */

    /* Neon glow effect */
    --brokerly-neon-glow: rgba(189, 240, 56, 0.35);

    /* Comparison Card specific colors (Fixed Premium Dark) */
    --comparison-bg: #151226;
    --comparison-gradient: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.25) 100%);
    --comparison-text-primary: #f8fafc;
    --comparison-text-secondary: #cbd5e1;
    --comparison-border: rgba(167, 139, 250, 0.3);
    --comparison-savings: #adff2f;
    --comparison-accent: #c084fc;
    --comparison-accent-light: rgba(167, 139, 250, 0.15);
    --comparison-card-inner-bg: rgba(255, 255, 255, 0.03);
    --dashboard-bg-start: #08080a;
    --dashboard-bg-end: #08080a;
    
    /* Action card categories - Premium dark status blocks */
    --theme-urgent-bg: #220c0e;
    --theme-high-bg: #231705;
    --theme-medium-bg: #061a12;
    --theme-low-bg: #08080a;
    --theme-urgent-text: #fecaca;
    --theme-high-text: #fef3c7;
    --theme-medium-text: #dcfce7;
    --theme-low-text: #cbd5e1;

    /* AI Assistant signature colors - optimized for Dark Mode visibility */
    --clive-gradient: linear-gradient(135deg, #2b1c66 0%, #7c3aed 100%);
    --clive-primary: #7c3aed;
    --clive-primary-rgb: 124, 58, 237;
    --clive-secondary: #2b1c66;
    --clive-secondary-light: rgba(43, 28, 102, 0.15);
    --clive-glow: rgba(124, 58, 237, 0.25);
    --clive-light: rgba(124, 58, 237, 0.15);
    --clive-strong-highlight: #f5f3ff;

    --clara-gradient: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
    --clara-primary: #10b981;
    --clara-primary-rgb: 16, 185, 129;
    --clara-secondary: #064e3b;
    --clara-secondary-light: rgba(6, 78, 59, 0.15);
    --clara-glow: rgba(16, 185, 129, 0.25);
    --clara-light: rgba(16, 185, 129, 0.15);
    --clara-strong-highlight: #f0fdf4;
  }
}

/* ===== DARK MODE — MANUAL TOGGLE =====
 * This block activates when dark mode is explicitly set via [data-theme="dark"] or .dark-mode class.
 * Used for in-app theme switching regardless of OS preference.
 * ⚠️  Keep variable values in sync with the @media (prefers-color-scheme: dark) block above.
 */

:root[data-theme="dark"],
.dark-mode {
  /* Primary brand colors - Vibrant Neon Lime Green */
  --brokerly-primary: #bdf038;
  --brokerly-primary-dark: #a3d420;
  --brokerly-primary-light: rgba(189, 240, 56, 0.15);
  --brokerly-primary-lighter: rgba(189, 240, 56, 0.06);

  /* Background colors - Sleek Jet Black & Deep Charcoal */
  --brokerly-background: #08080a;
  --brokerly-secondary-background: #0e0e12;
  --brokerly-tertiary-background: #13141a;
  --brokerly-header-background: rgba(8, 8, 10, 0.85);

  /* Modern card background - Premium deep charcoal */
  --modern-card-background: #141419;

  /* Enhanced contrast backgrounds for dark mode content areas */
  --brokerly-card-background: #141419;
  --brokerly-section-background: #0e0e12;
  --brokerly-input-background: #1a1a22;
  --brokerly-border-subtle: rgba(255, 255, 255, 0.06);
  --brokerly-border-medium: rgba(255, 255, 255, 0.15);

  /* Text colors - Elevated high-contrast greys & crisp whites */
  --brokerly-text-primary: #f8fafc;
  --brokerly-text-secondary: #94a3b8;
  --brokerly-text-tertiary: #64748b;
  --brokerly-text-quaternary: #334155;

  /* Border and shadow colors */
  --brokerly-border: rgba(255, 255, 255, 0.08);
  --brokerly-border-light: rgba(255, 255, 255, 0.04);
  --brokerly-primary-shadow: rgba(189, 240, 56, 0.2);
  --brokerly-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);

  /* Premium colors adjusted for dark mode */
  --brokerly-gold: #ffd700;
  --brokerly-warm-green: #adff2f;
  --brokerly-warm-red: #ff3b30;
  --brokerly-warm-teal: #00e5ff;
  --brokerly-accent-green: #bdf038; /* Neon Acid Green Accent */

  /* Neon glow effect */
  --brokerly-neon-glow: rgba(189, 240, 56, 0.35);

  /* Comparison Card specific colors (Fixed Premium Dark) */
  --comparison-bg: #151226;
  --comparison-gradient: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.25) 100%);
  --comparison-text-primary: #f8fafc;
  --comparison-text-secondary: #cbd5e1;
  --comparison-border: rgba(167, 139, 250, 0.3);
  --comparison-savings: #adff2f;
  --comparison-accent: #c084fc;
  --comparison-accent-light: rgba(167, 139, 250, 0.15);
  --comparison-card-inner-bg: rgba(255, 255, 255, 0.03);

  /* Alert Card colors (Dark Mode - Deep Warm) */
  --alert-bg: #220c0e;
  --alert-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.2) 100%);
  --alert-text-primary: #fee2e2;
  --alert-text-secondary: #fca5a5;
  --alert-border: rgba(239, 68, 68, 0.30);
  --alert-accent: #ff3860;
  --alert-accent-light: rgba(239, 68, 68, 0.10);

  /* Insight Card colors (Dark Mode - Deep Forest) */
  --insight-bg: #061a12;
  --insight-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(52, 211, 153, 0.2) 100%);
  --insight-text-primary: #ecfdf5;
  --insight-text-secondary: #a7f3d0;
  --insight-border: rgba(16, 185, 129, 0.30);
  --insight-accent: #34d399;
  --insight-accent-light: rgba(16, 185, 129, 0.10);

  /* Quick Action Card colors (Dark Mode - Deep Navy) */
  --quick-bg: #071324;
  --quick-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(96, 165, 250, 0.2) 100%);
  --quick-text-primary: #eff6ff;
  --quick-text-secondary: #bfdbfe;
  --quick-border: rgba(59, 130, 246, 0.30);
  --quick-accent: #60a5fa;
  --quick-accent-light: rgba(59, 130, 246, 0.10);

  /* AI Assistant signature colors - optimized for Dark Mode visibility */
  --clive-gradient: linear-gradient(135deg, #2b1c66 0%, #7c3aed 100%);
  --clive-primary: #7c3aed;
  --clive-primary-rgb: 124, 58, 237;
  --clive-secondary: #2b1c66;
  --clive-secondary-light: rgba(43, 28, 102, 0.15);
  --clive-glow: rgba(124, 58, 237, 0.25);
  --clive-light: rgba(124, 58, 237, 0.15);
  --clive-strong-highlight: #f5f3ff;

  --clara-gradient: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
  --clara-primary: #10b981;
  --clara-primary-rgb: 16, 185, 129;
  --clara-secondary: #064e3b;
  --clara-secondary-light: rgba(6, 78, 59, 0.15);
  --clara-glow: rgba(16, 185, 129, 0.25);
  --clara-light: rgba(16, 185, 129, 0.15);
  --clara-strong-highlight: #f0fdf4;
}

/* ===== UTILITY CLASSES FOR COMMON PATTERNS ===== */

.text-primary {
  color: var(--brokerly-text-primary);
}

.text-secondary {
  color: var(--brokerly-text-secondary);
}

.text-tertiary {
  color: var(--brokerly-text-tertiary);
}

.bg-primary {
  background-color: var(--brokerly-primary);
}

.bg-secondary {
  background-color: var(--brokerly-secondary-background);
}

.bg-card {
  background-color: var(--modern-card-background);
}

.border-primary {
  border-color: var(--brokerly-primary);
}

.border-light {
  border-color: var(--brokerly-border-light);
}

.shadow-subtle {
  box-shadow: var(--shadow-subtle);
}

.shadow-medium {
  box-shadow: var(--shadow-medium);
}

.shadow-high {
  box-shadow: var(--shadow-high);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-normal {
  transition: all var(--transition-normal);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* ===== PREMIUM VISUAL POLISH ===== */

/* Multicolored 8-Color Gradient (iOS AI Avatar Border) */
:root {
  --gradient-multicolor-8: linear-gradient(135deg,
      rgba(255, 111, 97, 1) 0%,
      /* Coral */
      rgba(255, 215, 0, 1) 12.5%,
      /* Gold */
      rgba(80, 200, 120, 1) 25%,
      /* Emerald */
      rgba(0, 158, 217, 1) 37.5%,
      /* Cerulean Blue */
      rgba(87, 204, 234, 1) 50%,
      /* Primary Cyan */
      rgba(255, 111, 97, 1) 62.5%,
      /* Coral (repeat) */
      rgba(255, 215, 0, 1) 75%,
      /* Gold (repeat) */
      rgba(80, 200, 120, 1) 87.5%,
      /* Emerald (repeat) */
      rgba(87, 204, 234, 1) 100%
      /* Primary Cyan */
    );

  /* Rotating multicolor gradient (for animations) */
  --gradient-multicolor-rotating: conic-gradient(from 0deg,
      rgba(255, 111, 97, 1),
      rgba(255, 215, 0, 1),
      rgba(80, 200, 120, 1),
      rgba(0, 158, 217, 1),
      rgba(87, 204, 234, 1),
      rgba(255, 111, 97, 1));

  /* Premium Pearl/Champagne Colors */
  --pearl-white: #F5F2ED;
  --champagne: #EDE9DD;
  --champagne-light: #FAF8F3;

  /* Neon Pink Accent (RGB 255, 51, 204) */
  --neon-pink: rgb(255, 51, 204);
  --neon-pink-glow: rgba(255, 51, 204, 0.4);
  --neon-pink-light: rgba(255, 51, 204, 0.1);

  /* Gold Premium Gradient */
  --gradient-gold-premium: linear-gradient(135deg,
      #D9A621 0%,
      #FFD700 25%,
      #D9A621 50%,
      #B87A0A 100%);

  /* Holographic Shimmer Gradient */
  --gradient-holographic: linear-gradient(135deg,
      rgba(245, 242, 237, 0.4),
      rgba(255, 20, 204, 0.3),
      rgba(212, 167, 106, 0.5),
      rgba(237, 233, 223, 0.6),
      rgba(255, 20, 204, 0.3),
      rgba(245, 242, 237, 0.4));

  /* Shimmer Sweep for Animations */
  --gradient-shimmer-sweep: linear-gradient(90deg,
      transparent,
      rgba(245, 242, 237, 0.15),
      rgba(212, 167, 106, 0.1),
      rgba(245, 242, 237, 0.15),
      transparent);

  /* Modern Shadow System */
  --shadow-card-subtle: 0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.02);

  --shadow-card-moderate: 0 4px 12px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.04);

  --shadow-card-intense: 0 8px 24px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.06);

  --shadow-gold: 0 8px 20px rgba(217, 166, 33, 0.2),
    0 12px 32px rgba(184, 122, 10, 0.15);

  --shadow-neon: 0 4px 16px var(--neon-pink-glow),
    0 8px 32px rgba(255, 51, 204, 0.2);
}

/* ===== TEAM AVATAR UTILITY ===== */

.team-avatar-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 56px;
  height: 40px;
}

.team-avatar-container.small {
  width: 48px;
  height: 32px;
}

.team-avatar-container .team-avatar {
  border-radius: 50%;
  border: 2px solid var(--brokerly-card-background);
  position: absolute;
  overflow: hidden;
  background: var(--brokerly-tertiary-background);
  transition: transform var(--transition-normal);
}

.team-avatar-container .team-avatar.clive {
  z-index: 1;
  left: 0;
  width: 40px;
  height: 40px;
}

.team-avatar-container.small .team-avatar.clive {
  width: 32px;
  height: 32px;
}

.team-avatar-container .team-avatar.clara {
  z-index: 2;
  left: 16px;
  width: 40px;
  height: 40px;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}

.team-avatar-container.small .team-avatar.clara {
  left: 14px;
  width: 32px;
  height: 32px;
}

.team-avatar-container .team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== CARBON EMBEDDED ACTION CARDS (Spending Analysis) ===== */

.carbon-embedded-card {
  background: var(--brokerly-card-background);
  border: 1px solid var(--brokerly-border);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carbon-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.carbon-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--brokerly-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.carbon-card-title svg {
  color: var(--brokerly-primary);
}

.carbon-type-badge {
  background: var(--brokerly-tertiary-background);
  color: var(--brokerly-text-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.carbon-insight-box {
  background: var(--brokerly-secondary-background);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.carbon-insight-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--brokerly-card-background);
}

.carbon-insight-content {
  flex: 1;
}

.carbon-insight-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brokerly-primary);
  margin-bottom: 2px;
}

.carbon-insight-text {
  font-size: 13px;
  color: var(--brokerly-text-secondary);
  line-height: 1.4;
}

.carbon-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.carbon-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.carbon-btn-primary {
  background: var(--brokerly-primary);
  color: white;
}

.carbon-btn-primary:hover {
  background: var(--brokerly-primary-hover);
  transform: translateY(-1px);
}

.carbon-btn-primary:disabled {
  background: var(--brokerly-success);
  opacity: 0.8;
  cursor: default;
  transform: none;
}

/* Neon Lime Contrast Overrides for Dark Mode */
:root[data-theme="dark"] .btn-primary,
.dark-mode .btn-primary,
:root[data-theme="dark"] .carbon-btn-primary,
.dark-mode .carbon-btn-primary,
:root[data-theme="dark"] .touch-mode-toggle.active,
.dark-mode .touch-mode-toggle.active {
  color: #08080a !important;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .carbon-btn-primary,
  :root:not([data-theme="light"]) .touch-mode-toggle.active {
    color: #08080a !important;
    font-weight: 700;
  }
}

/* ===== HARDWARE ACCELERATION FALLBACKS (SOFTWARE RENDERING MODE) ===== */

/* 1. Globally remove expensive effects to prevent CPU rendering bottlenecks (includes pseudo-elements) */
.no-hw-accel *,
.no-hw-accel *::before,
.no-hw-accel *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition-duration: 0.001s !important;
  animation-duration: 0.001s !important;
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}

/* 2. Disable smooth scrolling, which causes massive scroll jitter/lag on CPU */
.no-hw-accel,
.no-hw-accel html {
  scroll-behavior: auto !important;
}

/* 3. Hide closed sheets/drawers completely to avoid layout/style calculations */
.no-hw-accel .slide-up-sheet,
.no-hw-accel .chat-drawer,
.no-hw-accel #goals-view-sheet,
.no-hw-accel #budgets-view-sheet,
.no-hw-accel #financial-drawer-overlay,
.no-hw-accel #chat-drawer {
  display: none !important;
}

/* 4. Instantly reveal open sheets/drawers (bypass sliding transform animations) */
.no-hw-accel .slide-up-sheet.active,
.no-hw-accel .chat-drawer.open,
.no-hw-accel #goals-view-sheet.active,
.no-hw-accel #budgets-view-sheet.active,
.no-hw-accel #financial-drawer-overlay.active,
.no-hw-accel #chat-drawer.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force instant layout positioning for all drawer panels/contents */
.no-hw-accel .slide-up-sheet .sheet-content,
.no-hw-accel .chat-drawer-panel,
.no-hw-accel #goals-view-sheet .sheet-content,
.no-hw-accel #budgets-view-sheet .sheet-content,
.no-hw-accel #financial-drawer-overlay .sheet-content,
.no-hw-accel #chat-drawer .chat-drawer-panel {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}

/* Force instant display for all drawer backdrops/overlays and override background opacity to keep UI visible */
.no-hw-accel .sheet-backdrop,
.no-hw-accel .chat-drawer-overlay,
.no-hw-accel #goals-view-sheet .sheet-backdrop,
.no-hw-accel #budgets-view-sheet .sheet-backdrop,
.no-hw-accel #financial-drawer-overlay .sheet-backdrop,
.no-hw-accel #chat-drawer .chat-drawer-overlay {
  transition: none !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

/* 5. Disable heavy animated background halos and pulse animation on pointing highlights */
.no-hw-accel .chat-drawer-panel::before,
.no-hw-accel .chat-drawer-panel::after,
.no-hw-accel .slide-up-sheet .sheet-content::before,
.no-hw-accel .slide-up-sheet .sheet-content::after,
.no-hw-accel #chat-drawer .chat-drawer-panel::before,
.no-hw-accel #chat-drawer .chat-drawer-panel::after,
.no-hw-accel #goals-view-sheet .sheet-content::before,
.no-hw-accel #goals-view-sheet .sheet-content::after,
.no-hw-accel #budgets-view-sheet .sheet-content::before,
.no-hw-accel #budgets-view-sheet .sheet-content::after,
.no-hw-accel #financial-drawer-overlay .sheet-content::before,
.no-hw-accel #financial-drawer-overlay .sheet-content::after,
.no-hw-accel .ai-pointer-highlight.pulse {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

/* 6. Solid color and border fallbacks for cards, sheets, drawers, and modal content */
.no-hw-accel .ai-card,
.no-hw-accel .comparison-card,
.no-hw-accel .price-comparison-card,
.no-hw-accel .balance-flow-card,
.no-hw-accel .flip-card,
.no-hw-accel .card-front,
.no-hw-accel .card-back,
.no-hw-accel .dashboard-card,
.no-hw-accel .overview-card,
.no-hw-accel .metric-card,
.no-hw-accel .action-card,
.no-hw-accel .glass-panel,
.no-hw-accel .chat-drawer-panel,
.no-hw-accel .financial-drawer,
.no-hw-accel .drawer-content,
.no-hw-accel .modal-content,
.no-hw-accel .sheet-content,
.no-hw-accel .ai-bubble,
.no-hw-accel .ai-bubble-container,
.no-hw-accel .clara-typing-indicator,
.no-hw-accel .guidance-overlay,
.no-hw-accel .guided-tour-spotlight,
.no-hw-accel .onboarding-card {
  background-color: var(--brokerly-secondary-background) !important;
  background-image: none !important;
  border: 1px solid var(--brokerly-border-medium) !important;
}

/* 7. Solid background adjustments for headers, navbars, and bottom bars */
.no-hw-accel .app-header,
.no-hw-accel .main-header,
.no-hw-accel .mobile-navigation,
.no-hw-accel .desktop-navigation,
.no-hw-accel .nav-bar {
  background-color: var(--brokerly-background) !important;
  border-bottom: 1px solid var(--brokerly-border-medium) !important;
}

/* 8. Use content-visibility to defer offscreen layout/painting for list elements inside drawers */
.no-hw-accel .transaction-row,
.no-hw-accel .budget-card,
.no-hw-accel .goal-card,
.no-hw-accel .action-card {
  content-visibility: auto;
  contain-intrinsic-size: 80px;
}

/* 9. Disable loading screen logo animations and background halos in software rendering mode */
.no-hw-accel .loading-logo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.no-hw-accel .logo-container::before,
.no-hw-accel .logo-container::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

/* 10. Low Performance Mode Warning Banner styling */
.low-performance-banner {
  display: none;
  background-color: rgba(245, 158, 11, 0.15); /* Warm amber/yellow warning color */
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--brokerly-text-primary, #0f172a);
  padding: 12px 16px;
  border-radius: 12px;
  margin: 16px 24px 8px 24px;
  font-size: 0.9rem;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  z-index: 10;
}

.low-performance-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}

.low-performance-banner-icon {
  color: #f59e0b; /* Amber */
  flex-shrink: 0;
}

.low-performance-banner-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  border-radius: 4px;
  flex-shrink: 0;
}

.low-performance-banner-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.no-hw-accel .low-performance-banner {
  display: flex;
}