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

:root {
  /* ===== 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);

  /* 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: #1AB359;
  --brokerly-warm-red: #E63333;
  --brokerly-warm-teal: #1AB3A6;

  /* ===== 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: 9998;
  --z-sheet-content: 9999;
  --z-modal-backdrop: 10000;
  --z-modal: 10001;
  --z-popover: 10002;
  --z-tooltip: 10003;
  --z-toast: 10004;

  /* ===== 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 - Sophisticated Purple Gradient */
  --clive-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --clive-primary: #667eea;
  --clive-secondary: #764ba2;
  --clive-glow: rgba(102, 126, 234, 0.2);
  --clive-light: rgba(102, 126, 234, 0.1);

  /* Clara - Elegant Teal Gradient (complementary to Clive's purple, with subtle rose hint at corner) */
  --clara-gradient: linear-gradient(135deg, #66C9BA 0%, #4FAFA6 95%, #8F949D 100%);
  --clara-primary: #66C9BA;
  --clara-secondary: #4FAFA6;
  --clara-glow: rgba(102, 201, 186, 0.2);
  --clara-light: rgba(102, 201, 186, 0.1);
}

/* ===== DARK MODE VARIABLES ===== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Primary brand colors - Complementary Blue (stability, trust) */
    --brokerly-primary: #3b82f6;
    /* Slightly brighter in dark mode for pop */
    --brokerly-primary-dark: #2563eb;
    --brokerly-primary-light: #60a5fa;
    --brokerly-primary-lighter: rgba(59, 130, 246, 0.15);

    /* Background colors - Very Dark Blue base */
    --brokerly-background: #0f172a;
    /* Keep original very dark blue */
    --brokerly-secondary-background: #131c2d;
    --brokerly-tertiary-background: #1e293b;
    --brokerly-header-background: rgba(15, 23, 42, 0.85);

    /* Modern card background - Premium deep slate */
    --modern-card-background: #182236;

    /* Enhanced contrast backgrounds for dark mode content areas */
    --brokerly-card-background: #182236;
    --brokerly-section-background: #131c2d;
    /* Replaces stark bright navys */
    --brokerly-input-background: #0b1121;
    --brokerly-border-subtle: rgba(148, 163, 184, 0.1);
    /* Clean, tintless borders */
    --brokerly-border-medium: rgba(148, 163, 184, 0.2);

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

    /* Border and shadow colors */
    --brokerly-border: rgba(148, 163, 184, 0.15);
    --brokerly-border-light: rgba(148, 163, 184, 0.08);
    --brokerly-primary-shadow: rgba(59, 130, 246, 0.25);
    --brokerly-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* Deeper, richer shadow */

    /* Premium colors adjusted for dark mode */
    --brokerly-gold: #fbbf24;
    --brokerly-warm-green: #34d399;
    --brokerly-warm-red: #f87171;
    --brokerly-warm-teal: #2dd4bf;

    /* Neon glow effect */
    --brokerly-neon-glow: rgba(249, 115, 22, 0.4);
  }
}

/* ===== FORCED DARK MODE CLASS ===== */

:root[data-theme="dark"],
.dark-mode {
  /* Primary brand colors - Complementary Blue (stability, trust) */
  --brokerly-primary: #3b82f6;
  /* Slightly brighter in dark mode for pop */
  --brokerly-primary-dark: #2563eb;
  --brokerly-primary-light: #60a5fa;
  --brokerly-primary-lighter: rgba(59, 130, 246, 0.15);

  /* Background colors - Very Dark Blue base */
  --brokerly-background: #0f172a;
  /* Keep original very dark blue */
  --brokerly-secondary-background: #131c2d;
  --brokerly-tertiary-background: #1e293b;
  --brokerly-header-background: rgba(15, 23, 42, 0.85);

  /* Modern card background - Premium deep slate */
  --modern-card-background: #182236;

  /* Enhanced contrast backgrounds for dark mode content areas */
  --brokerly-card-background: #182236;
  --brokerly-section-background: #131c2d;
  /* Replaces stark bright navys */
  --brokerly-input-background: #0b1121;
  --brokerly-border-subtle: rgba(148, 163, 184, 0.1);
  /* Clean, tintless borders */
  --brokerly-border-medium: rgba(148, 163, 184, 0.2);

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

  /* Border and shadow colors */
  --brokerly-border: rgba(148, 163, 184, 0.15);
  --brokerly-border-light: rgba(148, 163, 184, 0.08);
  --brokerly-primary-shadow: rgba(59, 130, 246, 0.25);
  --brokerly-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  /* Deeper, richer shadow */

  /* Premium colors adjusted for dark mode */
  --brokerly-gold: #fbbf24;
  --brokerly-warm-green: #34d399;
  --brokerly-warm-red: #f87171;
  --brokerly-warm-teal: #2dd4bf;

  /* Neon glow effect */
  --brokerly-neon-glow: rgba(249, 115, 22, 0.4);
}

/* ===== 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);
}