/* Real House IQ Brand Color System - Comprehensive Override */

:root {
  /* BRAND COLOR PALETTE */
  --primary-brown: #65554A;           /* Main brand color - trust & stability */
  --accent-orange: #F3AD34;           /* CTA actions - energy & urgency */
  --deep-teal: #2A4B5C;              /* Complementary - professionalism */
  --light-cream: #F8F9FA;            /* Backgrounds - clean & spacious */
  --dark-gray: #495057;              /* Body text - readability */
  --light-gray: #E9ECEF;             /* Borders & dividers */
  
  /* LEGACY VARIABLE OVERRIDES */
  --primary-color: var(--primary-brown);
  --primary-text-color01: #FFFFFF;
  --primary-text-color02: var(--dark-gray);
  --primary-text-color03: #000000;
  --primary-background: var(--light-cream);
  --primary-category-background: color-mix(in srgb, var(--primary-brown) 8%, #fff);
  --primary-sell: var(--deep-teal);
  --primary-rent: var(--accent-orange);
  --primary-sell-bg: color-mix(in srgb, var(--deep-teal) 10%, #fff);
  --primary-rent-bg: color-mix(in srgb, var(--accent-orange) 10%, #fff);
  --border-color: var(--light-gray);
  --card-bg-color: #FFFFFF;
  --brand-color: var(--primary-brown);
  --lead-color: var(--dark-gray);
  --new-border-color: var(--light-gray);
  --shadow-color: rgba(101, 85, 74, 0.15);
  
  /* DESIGN TOKENS */
  --radius: 8px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --shadow-sm: 0 1px 2px 0 rgba(101, 85, 74, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(101, 85, 74, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(101, 85, 74, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(101, 85, 74, 0.1);
}

/* GLOBAL OVERRIDES */
* {
  --tw-ring-color: var(--primary-brown);
}

/* TYPOGRAPHY SYSTEM */
body {
  color: var(--dark-gray);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-brown);
  font-weight: 600;
  line-height: 1.2;
}

/* BUTTON SYSTEM */
button, .btn {
  transition: all var(--transition-fast);
  border-radius: var(--radius);
}

/* Primary Buttons */
.primaryBg, 
.bg-primary,
button[class*="bg-blue"],
button[class*="bg-primary"],
.btn-primary {
  background: linear-gradient(135deg, var(--primary-brown), #5a4a40) !important;
  border-color: var(--primary-brown) !important;
  color: white !important;
  box-shadow: var(--shadow-sm);
}

.primaryBg:hover,
.bg-primary:hover,
button[class*="bg-blue"]:hover,
button[class*="bg-primary"]:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #5a4a40, var(--primary-brown)) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary/CTA Buttons */
.bg-orange-500,
.cta-button,
button[class*="orange"] {
  background: linear-gradient(135deg, var(--accent-orange), #e09420) !important;
  border-color: var(--accent-orange) !important;
  color: white !important;
  box-shadow: var(--shadow-sm);
}

.bg-orange-500:hover,
.cta-button:hover,
button[class*="orange"]:hover {
  background: linear-gradient(135deg, #e09420, var(--accent-orange)) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(243, 173, 52, 0.3);
}

/* Outline Buttons */
.border-primary,
.primaryBorderColor {
  border-color: var(--primary-brown) !important;
  color: var(--primary-brown) !important;
}

.border-primary:hover,
.primaryBorderColor:hover {
  background-color: var(--primary-brown) !important;
  color: white !important;
}

/* NAVIGATION SYSTEM */
nav, 
header, 
.navbar,
.navigation {
  background: linear-gradient(135deg, var(--primary-brown), #4d4138) !important;
  border-bottom: 1px solid rgba(101, 85, 74, 0.1);
  backdrop-filter: blur(10px);
}

.nav-link,
nav a,
header a {
  color: white !important;
  transition: all var(--transition-fast);
}

.nav-link:hover,
nav a:hover,
header a:hover {
  color: var(--accent-orange) !important;
  transform: translateY(-1px);
}

/* FORM SYSTEM */
input, 
textarea, 
select {
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  background-color: var(--light-cream);
}

input:focus, 
textarea:focus, 
select:focus {
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 0 3px rgba(243, 173, 52, 0.15) !important;
  outline: none;
  background-color: white;
}

input::placeholder,
textarea::placeholder {
  color: var(--dark-gray);
  opacity: 0.7;
}

/* CARD SYSTEM */
.card,
.property-card,
.cardBg {
  background-color: white !important;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.card:hover,
.property-card:hover {
  border-color: var(--primary-brown) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

/* PROPERTY STATUS BADGES */
.status-badge {
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-available {
  background-color: color-mix(in srgb, var(--deep-teal) 10%, #fff);
  color: var(--deep-teal);
}

.status-sold {
  background-color: color-mix(in srgb, var(--primary-brown) 10%, #fff);
  color: var(--primary-brown);
}

.status-featured {
  background-color: color-mix(in srgb, var(--accent-orange) 10%, #fff);
  color: var(--accent-orange);
}

/* LINK SYSTEM */
a,
.link {
  color: var(--primary-brown);
  text-decoration: none;
  transition: all var(--transition-fast);
}

a:hover,
.link:hover {
  color: var(--accent-orange);
  text-decoration: underline;
}

/* TEXT COLOR OVERRIDES */
.primaryColor,
.text-primary {
  color: var(--primary-brown) !important;
}

.primaryTextColor {
  color: white !important;
}

.secondryTextColor {
  color: var(--dark-gray) !important;
}

.text-blue-500,
.text-blue-600,
.text-[#0186D8] {
  color: var(--primary-brown) !important;
}

/* BACKGROUND COLOR OVERRIDES */
.bg-blue-500,
.bg-blue-600,
.bg-[#0186D8] {
  background-color: var(--primary-brown) !important;
}

.primaryBgLight {
  background-color: color-mix(in srgb, var(--primary-brown) 4%, #fff) !important;
}

.primaryBgLight08 {
  background-color: color-mix(in srgb, var(--primary-brown) 8%, #fff) !important;
}

.primaryBgLight12 {
  background-color: color-mix(in srgb, var(--primary-brown) 12%, #fff) !important;
}

/* BORDER COLOR OVERRIDES */
.border-blue-500,
.border-blue-600,
.border-[#0186D8] {
  border-color: var(--primary-brown) !important;
}

/* PRICE DISPLAY SYSTEM */
.price-display {
  color: var(--accent-orange);
  font-weight: 600;
  font-size: 1.25rem;
}

.price-currency {
  color: var(--dark-gray);
  font-weight: 400;
  font-size: 0.875rem;
}

/* SEARCH AND FILTER SYSTEM */
.search-box,
.filter-container {
  background: white;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.search-button {
  background: linear-gradient(135deg, var(--accent-orange), #e09420);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.search-button:hover {
  background: linear-gradient(135deg, #e09420, var(--accent-orange));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(243, 173, 52, 0.3);
}

/* FOOTER SYSTEM */
footer {
  background: linear-gradient(135deg, var(--primary-brown), #4d4138);
  color: white;
  border-top: 1px solid rgba(101, 85, 74, 0.1);
}

footer a {
  color: rgba(255, 255, 255, 0.8);
  transition: all var(--transition-fast);
}

footer a:hover {
  color: var(--accent-orange);
}

/* LOADING AND SPINNER SYSTEM */
.spinner,
.loading-spinner {
  border-color: var(--light-gray);
  border-top-color: var(--primary-brown);
}

/* MODAL AND POPUP SYSTEM */
.modal,
.popup {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--light-gray);
}

.modal-header {
  border-bottom: 1px solid var(--light-gray);
  background: var(--light-cream);
}

/* RESPONSIVE DESIGN TOKENS */
@media (max-width: 768px) {
  :root {
    --radius: 6px;
  }
  
  .card:hover,
  .property-card:hover {
    transform: none;
  }
}

/* ACCESSIBILITY IMPROVEMENTS */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
  :root {
    --primary-brown: #4a3d35;
    --accent-orange: #e09420;
    --light-gray: #d0d0d0;
  }
}

/* DARK MODE SUPPORT (if needed) */
@media (prefers-color-scheme: dark) {
  :root {
    --light-cream: #1a1a1a;
    --card-bg-color: #2a2a2a;
    --dark-gray: #e0e0e0;
    --light-gray: #404040;
  }
}

/* PRINT STYLES */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}