/* =========================================
   PROPWISE DESIGN VARIABLES
========================================= */

:root {

  /* =========================================
     COLORS
  ========================================= */

  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-primary-soft: #eff6ff;

  --color-secondary: #0f172a;
  --color-secondary-light: #1e293b;
  --color-accent: #14b8a6;
  --color-accent-light: #ccfbf1;

  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  --color-white: #ffffff;

  --color-bg: #f8fafc;
  --color-bg-soft: #f9fbff;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;

  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --color-text: #0f172a;
  --color-text-light: #475569;
  --color-text-muted: #64748b;

  --color-navbar-bg: #ffffff;
  --color-footer-bg: #0f172a;

  --color-card-bg: #ffffff;

  --color-overlay: rgba(15, 23, 42, 0.65);
  --color-focus-ring: rgba(37, 99, 235, 0.16);

  /* =========================================
     TYPOGRAPHY
  ========================================= */

  --font-primary:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-heading:
    "Poppins",
    system-ui,
    sans-serif;

  /* Font Sizes */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;

  /* Font Weights */

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */

  --line-tight: 1.2;
  --line-normal: 1.6;
  --line-relaxed: 1.8;

  /* =========================================
     SPACING
  ========================================= */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =========================================
     BORDER RADIUS
  ========================================= */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* =========================================
     SHADOWS
  ========================================= */

  --shadow-sm:
    0 1px 2px rgba(15, 23, 42, 0.05);

  --shadow-md:
    0 8px 24px rgba(15, 23, 42, 0.08);

  --shadow-lg:
    0 16px 36px rgba(15, 23, 42, 0.12);

  --shadow-xl:
    0 24px 56px rgba(15, 23, 42, 0.16);

  --shadow-card:
    0 10px 30px rgba(15, 23, 42, 0.07);

  /* =========================================
     TRANSITIONS
  ========================================= */

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* =========================================
     LAYOUT
  ========================================= */

  --container-width: 1200px;
  --container-narrow: 900px;

  --navbar-height: 72px;

  /* =========================================
     Z-INDEX
  ========================================= */

  --z-dropdown: 1000;
  --z-navbar: 1100;
  --z-modal: 1200;
  --z-loader: 1300;

  /* =========================================
     BREAKPOINTS
     (REFERENCE ONLY)
  ========================================= */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}