/**
 * NV CITY - Design System CSS Variables
 * Mobile-First Real Estate Developer UI Framework
 */

:root {
  /* Brand Color System */
  --color-primary-blue: #146EF5;
  --color-primary-blue-hover: #0E5AD3;
  --color-primary-blue-active: #0A4BB8;
  --color-dark-navy: #071B33;
  --color-deep-navy: #041426;
  --color-navy-card: #0A2240;
  --color-white: #FFFFFF;
  --color-soft-blue: #F4F8FF;
  --color-blue-tint: #EAF3FF;
  --color-blue-tint-strong: #D6E8FF;
  --color-primary-text: #102A43;
  --color-secondary-text: #5B6B7A;
  --color-muted-text: #8295A9;
  --color-border: #DCE6F2;
  --color-border-dark: #1C3554;
  --color-border-light: #EDF2F8;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA5A;
  --color-success: #10B981;
  --color-error: #EF4444;

  /* Typography */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 8px Spacing Grid */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-button: 10px;
  --radius-card: 16px;
  --radius-image: 16px;
  --radius-pill: 9999px;

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px rgba(7, 27, 51, 0.05);
  --shadow-sm: 0 1px 3px rgba(7, 27, 51, 0.06), 0 1px 2px rgba(7, 27, 51, 0.04);
  --shadow-md: 0 4px 12px rgba(7, 27, 51, 0.08), 0 2px 4px rgba(7, 27, 51, 0.04);
  --shadow-lg: 0 12px 28px rgba(7, 27, 51, 0.12), 0 4px 10px rgba(7, 27, 51, 0.06);
  --shadow-xl: 0 20px 40px rgba(7, 27, 51, 0.16), 0 8px 16px rgba(7, 27, 51, 0.08);
  --shadow-blue-glow: 0 8px 24px rgba(20, 110, 245, 0.28);
  --shadow-whatsapp: 0 6px 20px rgba(37, 211, 102, 0.35);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Widths */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 1200px;
  --container-wide: 1360px;
  --container-max: 1360px;
  --container-padding: 16px;
  --header-height: 64px;
  --mobile-bar-height: 68px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 24px;
    --header-height: 76px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 32px;
    --header-height: 84px;
  }
}