/* ==========================================================================
   DEAL CENTRAL — PROFESSIONAL FINTECH & REAL ESTATE COLOR SYSTEM
   Hierarchy: White + Deep Navy + Professional Blue + Light Blue + Orange Accent
   ========================================================================== */

:root {

  /* ===== 1. CORE PALETTE ======================================== */
  --dc-navy:           #0B1F3A !important;   /* Primary Deep Navy (High-Contrast Headers/Headings) */
  --dc-navy-dark:      #071324 !important;   /* Darkest Navy Accent */
  --dc-blue:           #1565D8 !important;   /* Primary Action Blue (Buttons, Links, Active States) */
  --dc-blue-hover:     #0F4DB8 !important;   /* Deep Blue Hover */
  --dc-blue-light:     #EAF2FF !important;   /* Light Blue Accent / Tag Backgrounds */
  --dc-blue-soft:      #F3F7FF !important;   /* Soft Light Blue Alternating Section Ground */
  
  --dc-orange:         #FF8A00 !important;   /* High-Impact CTA Accent (Important Actions/Dispo/Pills) */
  --dc-orange-deep:    #EA580C !important;   /* Deep Orange */
  --dc-orange-soft:    #FFF7ED !important;   /* Soft Orange Tint */

  --dc-teal:           #14B8A6 !important;   /* Success / Live Indicators */
  --dc-teal-deep:      #0F766E !important;
  --dc-teal-soft:      #F0FDFA !important;

  --dc-stone:          #FFFFFF !important;   /* Pure White Canvas */
  --dc-stone-2:        #F8FAFC !important;   /* Light Neutral Ground */
  --dc-paper:          #FFFFFF !important;   /* Floating Card Surface */
  --dc-rule:           #EFE8DA !important;   /* Clean Slate Border */
  --dc-rule-strong:    #BFDBFE !important;   /* Blue Border Highlight */
  
  --dc-text:           #1E293B !important;   /* Main Text (Deep Slate) */
  --dc-text-soft:      #475569 !important;   /* Secondary Text (Slate) */
  --dc-text-mute:      #64748B !important;   /* Muted Text */

  /* Semantic Aliases */
  --dc-ink:            var(--dc-navy) !important;
  --dc-forest:         var(--dc-blue) !important;
  --dc-forest-deep:    var(--dc-blue-hover) !important;
  --dc-verdant:        var(--dc-blue) !important;
  --dc-signal:         var(--dc-orange) !important;
  --dc-ok:             #059669 !important;
  --dc-warn:           #D97706 !important;
  --dc-danger:         #DC2626 !important;
  --dc-info:           var(--dc-blue) !important;

  --font-header: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  --font-body:   'Source Sans 3', system-ui, -apple-system, sans-serif !important;
  --font-mono:   'JetBrains Mono', ui-monospace, monospace !important;

  /* Aliases */
  --primary:               var(--dc-blue) !important;
  --primary-hover:         var(--dc-blue-hover) !important;
  --accent:                var(--dc-orange) !important;
  --accent-hover:          var(--dc-orange-deep) !important;
  --bg-main:               var(--dc-stone) !important;
  --bg-surface:            var(--dc-paper) !important;
  --bg-surface-hover:      var(--dc-blue-soft) !important;
  --border-color:          var(--dc-rule) !important;
  --text-main:             var(--dc-text) !important;
  --text-secondary:        var(--dc-text-soft) !important;
  --text-muted:            var(--dc-text-mute) !important;
}

body, .frontend-body, .app-container {
  background-color: #FFFFFF !important;
  color: #1E293B !important;
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
}

/* Frosted Sticky Header */
.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #EFE8DA !important;
  box-shadow: 0 4px 20px -4px rgba(11, 31, 58, 0.06) !important;
}

.header .nav-link {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.header .nav-link:hover,
.header .nav-link.active {
  color: #1565D8 !important;
  background-color: #EAF2FF !important;
}

.nav-auth-btn {
  background: linear-gradient(135deg, #1565D8 0%, #0F4DB8 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  box-shadow: 0 4px 14px rgba(21, 101, 216, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.nav-auth-btn:hover {
  background: linear-gradient(135deg, #0F4DB8 0%, #0B3A8C 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(21, 101, 216, 0.45) !important;
}

/* Button hierarchy */
.btn-primary {
  background: linear-gradient(135deg, #1565D8 0%, #0F4DB8 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #1565D8 !important;
  box-shadow: 0 4px 14px rgba(21, 101, 216, 0.35) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0F4DB8 0%, #0B3A8C 100%) !important;
  box-shadow: 0 6px 20px rgba(21, 101, 216, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-accent {
  background: linear-gradient(135deg, #FF8A00 0%, #EA580C 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #FF8A00 !important;
  box-shadow: 0 4px 14px rgba(255, 138, 0, 0.35) !important;
}

.btn-accent:hover {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%) !important;
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.45) !important;
  transform: translateY(-1px) !important;
}