/* ====================================
   CSS VARIABLES - Single Source of Truth
   ==================================== */

:root {
  /* ===== Typography ===== */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 21px;
  --font-size-2xl: 24px;

  /* ===== Primary Colors (Blue) ===== */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;

  /* ===== Success Colors (Green) ===== */
  --color-success: #059669;
  --color-success-light: #10b981;
  --color-success-dark: #047857;
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;

  /* ===== Danger Colors (Red) ===== */
  --color-danger: #dc2626;
  --color-danger-light: #ef4444;
  --color-danger-dark: #b91c1c;
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;

  /* ===== Warning Colors (Orange/Yellow) ===== */
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;

  /* ===== Premium Colors (Orange) ===== */
  --color-premium: #f97316;
  --color-premium-light: #fb923c;
  --color-premium-dark: #ea580c;
  --color-premium-50: #fff7ed;
  --color-premium-100: #ffedd5;

  /* ===== Text Colors ===== */
  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-light: #9ca3af;

  /* ===== Background Colors ===== */
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-bg-hover: #f3f4f6;
  --color-bg-disabled: #f9fafb;

  /* ===== Border Colors ===== */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;

  /* ===== Status Colors ===== */
  --status-for-sale: #10b981;
  --status-under-contract: #f59e0b;
  --status-sold: #ef4444;
  --status-removed: #ef4444;
  --status-default: #9e9e9e;

  /* ===== Spacing Scale ===== */
  --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;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ===== Panel-Specific ===== */
  --panel-width: 430px;
  --panel-bg: linear-gradient(120deg, #f8fafc 0%, #f1f5f9 100%);
  --panel-radius: 18px;
  --panel-shadow: 0 8px 32px 0 rgba(60, 60, 60, 0.10), 0 1.5px 6px 0 rgba(60, 60, 60, 0.08);
  --panel-header-bg: rgba(255, 255, 255, 0.85);
  --panel-header-shadow: 0 2px 8px 0 rgba(180, 180, 180, 0.03);

  /* ===== Button-Specific ===== */
  --btn-bg: linear-gradient(90deg, #f4f7fa 0%, #e8eef4 100%);
  --btn-bg-hover: #e8eef4;
  --btn-border: #dde6ef;
  --btn-border-hover: #b6c6da;
  --btn-shadow: 0 1px 2px 0 rgba(200, 200, 200, 0.05);

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-panel: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-Index Scale ===== */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-panel: 1000;
  --z-overlay: 2000;
  --z-modal: 3000;
  --z-notification: 9000;
  --z-tooltip: 10000;
}