:root {
  /* === IMMO APP DESIGN SYSTEM === */
  
  /*
  Restructure: 
  Main Colors
  Header
  Header Text
  Header Backgroound
  Text
  Background
  Buttons
  Button Text 
  Button Background
  Table Background Colors
  */


  /* Primary Brand Colors */
  --immo-body-bg: white;
  /*#E3D7C6;*/
  --immo-top-menu: #343A40;
  --immo-side-menu: #585858;
  --immo-heading: black; /*#244142;  Heading Background */
  --immo-card: rgba(88, 123, 127, 0.2);
  --table-header: rgba(88, 123, 127, 0.50);/*Table Header Backgrond color*/
  
  ;
  /* buttons */
  --immo-button-blue: #3C91E6;
  --immo-button-light-blue: #53A2BE;
  --immo-button-red: #FE4A49;
  --immo-button-green: #21A179;
  --immo-button-turquoise: #39A2AE;

  /* Semantic Colors (mapped to button colors) */
  --immo-primary: var(--immo-button-blue);
  --immo-success: var(--immo-button-green);
  --immo-danger: var(--immo-button-red);
  --immo-info: var(--immo-button-turquoise);
  --immo-warning: #ffc107;
  --immo-secondary: #6b7280;
  --immo-light-blue: #53A2BE;

  /* Alert Background Colors (with opacity) */
  --immo-alert-success-bg: rgba(33, 161, 121, 0.1);
  --immo-alert-danger-bg: rgba(254, 74, 73, 0.1);
  --immo-alert-warning-bg: rgba(255, 193, 7, 0.1);
  --immo-alert-info-bg: rgba(57, 162, 174, 0.1);

  /* Text Colors */
  --immo-text-primary: black; /*#374151;*/
  --immo-text-secondary: #6b7280;
  --immo-text-muted: #9ca3af;
  --immo-text-white: #ffffff;

  /* Background Colors */
  --immo-bg-white: #a8a7a775;
  --immo-bg-gray-50: #f9fafb;
  --immo-bg-gray-100: #f3f4f6;
  --immo-bg-gray-200: #7777777b;
  --gradient-bg-blue-purp: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Border Colors */
  --immo-border-light: #e5e7eb;
  --immo-border-medium: #d1d5db;

  /* Typography */
  --immo-font-family: "Inter F", sans-serif;
  /*"Inter", "Segoe UI", Arial, sans-serif;*/ 
  /*'Inter', -apple-system, BlinkMacSystemFont;*/
  --immo-font-weight-normal: 400;
  --immo-font-weight-medium: 500;
  --immo-font-weight-semibold: 600;
  --immo-font-weight-bold: 700;

/* Apply custom font to all text elements including headings */
body {
    font-family: var(--immo-font-family);
    color: var(--immo-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--immo-font-family);
    font-weight: var(--immo-font-weight-bold);
    color: var(--immo-heading);
}


  /* Basic Spacing Scale - FOR REFERENCE, SELECTIVE USE */
  --immo-space-xs: 0.25rem;
  /* 4px */
  --immo-space-sm: 0.5rem;
  /* 8px */
  --immo-space-md: 0.75rem;
  /* 12px */
  --immo-space-lg: 1rem;
  /* 16px */
  --immo-space-xl: 1.5rem;
  /* 24px */
  --immo-space-2xl: 2rem;
  /* 32px */

  /* Responsive Breakpoints */
  --immo-breakpoint-sm: 576px;
  --immo-breakpoint-md: 768px;
  --immo-breakpoint-lg: 992px;
  --immo-breakpoint-xl: 1200px;
  --immo-breakpoint-2xl: 1400px;

  /* Basic Design Tokens - FOR REFERENCE */
  --immo-radius: 4px;
  --immo-radius-lg: 8px;
  --immo-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --immo-transition: 0.2s ease;
}