:root {
   /* ========================================
      THEME COLORS - Base Color Scheme
      ======================================== */
   /* Primary Colors */
   --color-blue: #1e5277;
   --color-dark-gray: #b3b3b3;
   --color-light-gray: #e8ebed;
   --color-ash-white: #f4f5f6;
   --color-gold: #b4ab74;
   --color-red: #dc2626;

   /* Font Colors */
   --text-base: #000000;
   --text-links: #b3b3b3;
   --text-headings: #b3b3b3;
   --text-h1: #b3b3b3;
   --text-h2: #b4ab74;
   --text-h3-h6: #b3b3b3;

   /* Button Colors */
   --btn-primary-bg: #1e5277;
   --btn-primary-text: #f4f5f6;
   --btn-secondary-bg: #e8ebed;
   --btn-secondary-text: #1e5277;
   --btn-danger: #dc2626;

   /* ========================================
      WORDPRESS ADMIN COLORS (Legacy Support)
      ======================================== */
   --wp-blue: #007cba;
   --wp-blue-dark: #005a87;
   --wp-blue-light: #00a0d2;
   --wp-gray-0: #f6f7f7;
   --wp-gray-2: #f0f0f0;
   --wp-gray-5: #dcdcde;
   --wp-gray-10: #c3c4c7;
   --wp-gray-20: #a7aaad;
   --wp-gray-30: #8c8f94;
   --wp-gray-40: #787c82;
   --wp-gray-50: #646970;
   --wp-gray-60: #50575e;
   --wp-gray-70: #3c434a;
   --wp-gray-80: #2c3338;
   --wp-gray-90: #1d2327;
   --wp-gray-100: #101517;

   /* Accent Colors */
   --wp-green: #00a32a;
   --wp-red: #d63638;
   --wp-yellow: #f0c33c;
   --wp-orange: #d54e21;

   /* Form Focus */
   --mls-focus-ring: rgba(30, 82, 119, 0.15);

   /* ========================================
      TYPOGRAPHY - Font Family & Sizes
      ======================================== */
   --font-family: 'Akatab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-size-base: 16px;
   --font-size-h1: 40px;
   --font-size-h2: 35px;
   --font-size-h3: 30px;
   --font-size-h4: 25px;
   --font-size-h5: 20px;
   --font-size-h6: 18px;

   /* ========================================
      SPACING
      ======================================== */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
   --spacing-lg: 16px;
   --spacing-xl: 24px;
   --spacing-xxl: 32px;

   /* ========================================
      BORDER RADIUS
      ======================================== */
   --radius-sm: 3px;
   --radius-md: 4px;
   --radius-lg: 6px;

   /* ========================================
      SHADOWS
      ======================================== */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);

   /* ========================================
      TRANSITIONS
      ======================================== */
   --transition-fast: 0.15s ease-in-out;
   --transition-normal: 0.2s ease-in-out;

   /* ========================================
      Z-INDEX LAYERS
      ======================================== */
   --z-dropdown: 100;
   --z-modal: 200;
   --z-tooltip: 300;
}

/* ========================================
   BASE TYPOGRAPHY STYLES
   ======================================== */
body {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   color: var(--text-base);
   line-height: 1.6;
   overflow-x: hidden;
   max-width: 100%;
}

/* Prevent horizontal overflow on all elements */
* {
   box-sizing: border-box;
}

/* Ensure containers don't overflow on mobile */
.site-content,
.entry-content,
.malisafi-agents-list,
.malisafi-client-dashboard,
.malisafi-owner-dashboard,
.malisafi-developer-dashboard {
   max-width: 100% !important;
   overflow-x: hidden;
   margin-left: 0 !important;
   margin-right: 0 !important;
   position: relative;
   left: auto !important;
   right: auto !important;
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-family);
   color: var(--text-headings);
   line-height: 1.3;
   margin-top: 0;
}

h1 {
   font-size: var(--font-size-h1);
   color: var(--text-h1);
}

h2 {
   font-size: var(--font-size-h2);
   color: var(--text-h2);
}

h3 {
   font-size: var(--font-size-h3);
   color: var(--text-h3-h6);
}

h4 {
   font-size: var(--font-size-h4);
   color: var(--text-h3-h6);
}

h5 {
   font-size: var(--font-size-h5);
   color: var(--text-h3-h6);
}

h6 {
   font-size: var(--font-size-h6);
   color: var(--text-h3-h6);
}

a {
   color: var(--text-links);
   text-decoration: none;
   transition: var(--transition-fast);
}

a:hover {
   color: var(--color-blue);
}