/* ========================================
   QUEENS ABSTRACT DYNAMIC COLOR SYSTEM
   ========================================
   
   This file contains all color variables used throughout the Queens Abstract website.
   To change colors, simply update the values below and they will apply site-wide.
   
   Usage:
   - Light mode: Use --color-name variables
   - Dark mode: Use --color-name-dark variables
   - Tailwind classes automatically use these variables
   
   ======================================== */

:root {
  /* ========================================
     PRIMARY BRAND COLORS
     ======================================== */
  
  /* Main Brand Color - Queens Abstract Dark Blue */
  --color-primary: #306584;
  --color-primary-dark: #306584;
  
  /* Primary Color Variations */
  --color-primary-50: #F0F4F7;
  --color-primary-100: #E1E9EF;
  --color-primary-200: #C3D3DF;
  --color-primary-300: #A5BDCF;
  --color-primary-400: #87A7BF;
  --color-primary-500: #306584;
  --color-primary-600: #26516A;
  --color-primary-700: #1C3D50;
  --color-primary-800: #122936;
  --color-primary-900: #08151C;
  
  /* Primary Dark Variations */
  --color-primary-dark-50: #08151C;
  --color-primary-dark-100: #122936;
  --color-primary-dark-200: #1C3D50;
  --color-primary-dark-300: #26516A;
  --color-primary-dark-400: #306584;
  --color-primary-dark-500: #87A7BF;
  --color-primary-dark-600: #A5BDCF;
  --color-primary-dark-700: #C3D3DF;
  --color-primary-dark-800: #E1E9EF;
  --color-primary-dark-900: #F0F4F7;

  /* ========================================
     SECONDARY BRAND COLORS
     ======================================== */
  
  /* Secondary Brand Color - Queens Abstract Brown/Tan */
  --color-secondary: #9D7C5D;
  --color-secondary-dark: #9D7C5D;
  
  /* Secondary Color Variations */
  --color-secondary-50: #F7F4F1;
  --color-secondary-100: #EFE9E3;
  --color-secondary-200: #DFD3C7;
  --color-secondary-300: #CFBDAB;
  --color-secondary-400: #BFA78F;
  --color-secondary-500: #9D7C5D;
  --color-secondary-600: #7D634A;
  --color-secondary-700: #5D4A37;
  --color-secondary-800: #3D3124;
  --color-secondary-900: #1D1811;
  
  /* Secondary Dark Variations */
  --color-secondary-dark-50: #1D1811;
  --color-secondary-dark-100: #3D3124;
  --color-secondary-dark-200: #5D4A37;
  --color-secondary-dark-300: #7D634A;
  --color-secondary-dark-400: #9D7C5D;
  --color-secondary-dark-500: #BFA78F;
  --color-secondary-dark-600: #CFBDAB;
  --color-secondary-dark-700: #DFD3C7;
  --color-secondary-dark-800: #EFE9E3;
  --color-secondary-dark-900: #F7F4F1;

  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  
  /* Light Mode Backgrounds */
  --color-background-light: #F8F9FA;
  --color-background-light-secondary: #FFFFFF;
  --color-background-light-tertiary: #F1F5F9;
  
  /* Dark Mode Backgrounds */
  --color-background-dark: #111827;
  --color-background-dark-secondary: #1F2937;
  --color-background-dark-tertiary: #374151;

  /* ========================================
     SURFACE COLORS
     ======================================== */
  
  /* Light Mode Surfaces */
  --color-surface-light: #FFFFFF;
  --color-surface-light-secondary: #F8F9FA;
  --color-surface-light-tertiary: #F1F5F9;
  
  /* Dark Mode Surfaces */
  --color-surface-dark: #1F2937;
  --color-surface-dark-secondary: #374151;
  --color-surface-dark-tertiary: #4B5563;

  /* ========================================
     TEXT COLORS
     ======================================== */
  
  /* Light Mode Text */
  --color-text-light: #1F2937;
  --color-text-light-secondary: #374151;
  --color-text-light-tertiary: #6B7280;
  
  /* Dark Mode Text */
  --color-text-dark: #F3F4F6;
  --color-text-dark-secondary: #E5E7EB;
  --color-text-dark-tertiary: #D1D5DB;

  /* ========================================
     SUBTLE COLORS (Secondary Text, Borders)
     ======================================== */
  
  /* Light Mode Subtle */
  --color-subtle-light: #6B7280;
  --color-subtle-light-secondary: #9CA3AF;
  --color-subtle-light-tertiary: #D1D5DB;
  
  /* Dark Mode Subtle */
  --color-subtle-dark: #9CA3AF;
  --color-subtle-dark-secondary: #6B7280;
  --color-subtle-dark-tertiary: #4B5563;

  /* ========================================
     BORDER COLORS
     ======================================== */
  
  /* Light Mode Borders */
  --color-border-light: #E5E7EB;
  --color-border-light-secondary: #D1D5DB;
  --color-border-light-tertiary: #F3F4F6;
  
  /* Dark Mode Borders */
  --color-border-dark: #374151;
  --color-border-dark-secondary: #4B5563;
  --color-border-dark-tertiary: #6B7280;

  /* ========================================
     STATUS COLORS
     ======================================== */
  
  /* Success Colors */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark: #065F46;
  
  /* Warning Colors */
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #92400E;
  
  /* Error Colors */
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-dark: #991B1B;
  
  /* Info Colors */
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-info-dark: #1E40AF;

  /* ========================================
     SOCIAL MEDIA COLORS
     ======================================== */
  
  --color-twitter: #1DA1F2;
  --color-linkedin: #0077B5;
  --color-instagram: #E4405F;
  --color-facebook: #1877F2;

  /* ========================================
     GRADIENT COLORS
     ======================================== */
  
  /* Primary Gradients */
  --gradient-primary: linear-gradient(90deg, var(--color-primary), var(--color-primary-400));
  --gradient-primary-dark: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-dark-400));
  
  /* Secondary Gradients */
  --gradient-secondary: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-400));
  --gradient-secondary-dark: linear-gradient(90deg, var(--color-secondary-dark), var(--color-secondary-dark-400));
  
  /* Brand Gradients (Primary to Secondary) */
  --gradient-brand: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  --gradient-brand-dark: linear-gradient(90deg, var(--color-primary-dark), var(--color-secondary-dark));
  
  /* Background Gradients */
  --gradient-background-light: linear-gradient(135deg, var(--color-background-light), var(--color-background-light-secondary));
  --gradient-background-dark: linear-gradient(135deg, var(--color-background-dark), var(--color-background-dark-secondary));

  /* ========================================
     SHADOW COLORS
     ======================================== */
  
  --color-shadow-light: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.15);
  --color-shadow-dark: rgba(0, 0, 0, 0.25);
  --color-shadow-primary: rgba(48, 101, 132, 0.25);
  --color-shadow-primary-dark: rgba(48, 101, 132, 0.4);
  --color-shadow-secondary: rgba(157, 124, 93, 0.25);
  --color-shadow-secondary-dark: rgba(157, 124, 93, 0.4);
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

.dark {
  /* Override primary colors for dark mode if needed */
  --color-primary: var(--color-primary-dark);
  --color-secondary: var(--color-secondary-dark);
  
  /* Override background colors */
  --color-background-light: var(--color-background-dark);
  --color-background-light-secondary: var(--color-background-dark-secondary);
  
  /* Override surface colors */
  --color-surface-light: var(--color-surface-dark);
  --color-surface-light-secondary: var(--color-surface-dark-secondary);
  
  /* Override text colors */
  --color-text-light: var(--color-text-dark);
  --color-text-light-secondary: var(--color-text-dark-secondary);
  
  /* Override subtle colors */
  --color-subtle-light: var(--color-subtle-dark);
  --color-subtle-light-secondary: var(--color-subtle-dark-secondary);
  
  /* Override border colors */
  --color-border-light: var(--color-border-dark);
  --color-border-light-secondary: var(--color-border-dark-secondary);
  
  /* Override gradients */
  --gradient-primary: var(--gradient-primary-dark);
  --gradient-secondary: var(--gradient-secondary-dark);
  --gradient-brand: var(--gradient-brand-dark);
  --gradient-background-light: var(--gradient-background-dark);
  
  /* Override shadows */
  --color-shadow-light: rgba(255, 255, 255, 0.1);
  --color-shadow-medium: rgba(255, 255, 255, 0.15);
  --color-shadow-dark: rgba(255, 255, 255, 0.25);
  --color-shadow-primary: var(--color-shadow-primary-dark);
  --color-shadow-secondary: var(--color-shadow-secondary-dark);
}

/* ========================================
   UTILITY CLASSES FOR DIRECT CSS VARIABLE USAGE
   ======================================== */

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

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

.bg-background-light { background-color: var(--color-background-light); }
.bg-background-dark { background-color: var(--color-background-dark); }

.bg-surface-light { background-color: var(--color-surface-light); }
.bg-surface-dark { background-color: var(--color-surface-dark); }

.text-text-light { color: var(--color-text-light); }
.text-text-dark { color: var(--color-text-dark); }

.text-subtle-light { color: var(--color-subtle-light); }
.text-subtle-dark { color: var(--color-subtle-dark); }

.border-gray-200 { border-color: var(--color-border-light); }
.border-gray-700 { border-color: var(--color-border-dark); }

/* ========================================
   GRADIENT UTILITY CLASSES
   ======================================== */

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

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

.bg-gradient-brand {
  background: var(--gradient-brand);
}

.bg-gradient-background {
  background: var(--gradient-background-light);
}

.dark .bg-gradient-background {
  background: var(--gradient-background-dark);
}