/* ==========================================================================
   VANTAGE EXPERTS - DESIGN TOKENS & CSS VARIABLES
   Theme: Executive Navy (#0B1F42) & Prestige Gold (#C6A15B)
   Domain: Commercial Property Leasing & Retail Expansion Advisory
   ========================================================================== */

:root {
  /* Core Deep Navy Theme (Default) */
  --bg-primary: #07142B;           /* Deepest Midnight Navy */
  --bg-secondary: #0B1F42;         /* Primary Brand Navy: rgb(11, 31, 66) */
  --bg-tertiary: #102A56;          /* Rich Navy Surface */
  --bg-elevated: #16376E;          /* Elevated Navy Surface */
  
  /* Glassmorphism Surfaces */
  --bg-glass-nav: rgba(11, 31, 66, 0.88);
  --bg-glass-card: rgba(16, 42, 86, 0.65);
  --bg-glass-card-hover: rgba(22, 55, 110, 0.82);
  --bg-glass-input: rgba(7, 20, 43, 0.75);
  --backdrop-blur: blur(16px);
  --backdrop-blur-heavy: blur(24px);
  
  /* Prestige Gold Palette: rgb(198, 161, 91) / #C6A15B */
  --gold-200: #F4E7CC;
  --gold-300: #EAD2A1;
  --gold-400: #D8B46E;
  --gold-500: #C6A15B;             /* Primary Brand Gold: rgb(198, 161, 91) */
  --gold-600: #AA853D;
  --gold-700: #876727;
  --gold-subtle: rgba(198, 161, 91, 0.12);
  --gold-subtle-hover: rgba(198, 161, 91, 0.22);
  --gold-border: rgba(198, 161, 91, 0.32);
  --gold-border-bright: rgba(198, 161, 91, 0.70);
  --gold-gradient: linear-gradient(135deg, #F4E7CC 0%, #C6A15B 50%, #876727 100%);
  --gold-gradient-text: linear-gradient(135deg, #FFF6E5 0%, #D8B46E 45%, #C6A15B 100%);
  --gold-glow: 0 0 35px rgba(198, 161, 91, 0.28);
  --gold-glow-subtle: 0 0 20px rgba(198, 161, 91, 0.16);

  /* Secondary Growth Accents */
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-subtle: rgba(16, 185, 129, 0.15);
  --emerald-border: rgba(16, 185, 129, 0.35);

  /* Typography / Content Colors */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-dark: #0B1F42;
  --text-gold: #D8B46E;
  
  /* Structural Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-card: rgba(255, 255, 255, 0.10);
  
  /* Box Shadows */
  --shadow-sm: 0 2px 8px rgba(7, 20, 43, 0.4);
  --shadow-md: 0 8px 24px rgba(7, 20, 43, 0.55);
  --shadow-lg: 0 20px 48px rgba(7, 20, 43, 0.75);
  --shadow-card: 0 10px 30px -5px rgba(7, 20, 43, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.08);
  --shadow-card-hover: 0 20px 40px -10px rgba(7, 20, 43, 0.8), 0 0 25px rgba(198, 161, 91, 0.22);

  /* Typography Scale */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Layout Sizing & Spacing */
  --container-max: 1280px;
  --container-narrow: 1040px;
  --header-height: 122px;
  
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 5rem;     /* 80px */
  --space-4xl: 7.5rem;   /* 120px */
  
  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  
  /* Easing curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-spring);
  --transition-slow: 0.6s var(--ease-spring);
}

/* ==========================================================================
   LIGHT MODE OVERRIDE - WCAG AA High-Contrast Refined Palette
   ========================================================================== */
[data-theme="light"] {
  --bg-primary: #F4F7FB;           /* Clean, prestigious soft light background */
  --bg-secondary: #FFFFFF;         /* Crisp white cards & surfaces */
  --bg-tertiary: #EBF1F8;          /* Light navy-slate surface */
  --bg-elevated: #DCE7F3;          /* Elevated interactive surface */
  
  --bg-glass-nav: rgba(255, 255, 255, 0.94);
  --bg-glass-card: #FFFFFF;
  --bg-glass-card-hover: #FFFFFF;
  --bg-glass-input: #FFFFFF;
  
  /* High-Contrast Gold Palette for Light Backgrounds (Contrast Ratio > 5:1) */
  --gold-200: #876727;
  --gold-300: #5E3D06;             /* Deep golden bronze for readable text */
  --gold-400: #7A5210;             /* Ultra-readable gold for badges/links */
  --gold-500: #B88E3A;             /* Primary gold for buttons & borders */
  --gold-600: #947128;
  --gold-700: #6B4E14;
  --gold-subtle: rgba(184, 142, 58, 0.12);
  --gold-subtle-hover: rgba(184, 142, 58, 0.20);
  --gold-border: rgba(135, 103, 39, 0.35);
  --gold-border-bright: rgba(135, 103, 39, 0.70);
  --gold-gradient: linear-gradient(135deg, #E6C275 0%, #C6A15B 50%, #876727 100%);
  --gold-gradient-text: linear-gradient(135deg, #5E3D06 0%, #876727 50%, #4D370E 100%);
  --gold-glow: 0 0 25px rgba(184, 142, 58, 0.20);
  --gold-glow-subtle: 0 0 15px rgba(184, 142, 58, 0.12);
  
  /* High-Contrast Typography */
  --text-primary: #07142B;         /* Deepest Navy for maximum heading legibility */
  --text-secondary: #1E3A5F;       /* Rich Navy-Slate for crystal clear body copy */
  --text-muted: #4B6282;           /* Deep slate for accessible subtexts (>4.5:1) */
  --text-dark: #07142B;
  --text-gold: #7A5210;
  
  /* Crisp Structural Borders */
  --border-subtle: rgba(7, 20, 43, 0.08);
  --border-medium: rgba(7, 20, 43, 0.15);
  --border-card: rgba(7, 20, 43, 0.10);
  
  /* Sophisticated Soft Shadows */
  --shadow-sm: 0 2px 8px rgba(7, 20, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(7, 20, 43, 0.07);
  --shadow-lg: 0 20px 48px rgba(7, 20, 43, 0.10);
  --shadow-card: 0 4px 20px rgba(7, 20, 43, 0.05), 0 1px 3px rgba(7, 20, 43, 0.04);
  --shadow-card-hover: 0 14px 34px rgba(7, 20, 43, 0.12), 0 0 1px rgba(135, 103, 39, 0.40);
}