/* ========================================================= */
/* 1. FONT DEFINITIONS (NEW - THE CORRECT WAY) */
/* ========================================================= */

/* This is for your NORMAL body text (font-weight: 400) */
@font-face {
  font-family: 'Somar Sans';
  src: url('../assets/fonts/SomarSans-Regular.otf') format('opentype'); 
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* This is for MEDIUM text (font-weight: 500) */
@font-face {
  font-family: 'Somar Sans';
  src: url('../assets/fonts/SomarSans-Medium.otf') format('opentype'); 
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* This is for BOLD text (font-weight: 700) */
@font-face {
  font-family: 'Somar Sans';
  src: url('../assets/fonts/SomarSans-Bold.otf') format('opentype'); 
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* This is for EXTRA-BOLD text (font-weight: 800) */
@font-face {
  font-family: 'Somar Sans';
  src: url('../assets/fonts/SomarSans-ExtraBold.otf') format('opentype'); 
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ========================================================= */
/* 2. GLOBAL VARIABLES (THE SINGLE SOURCE OF TRUTH) */
/* ========================================================= */
:root {
  /* Colors */
  --color-brand-primary: #FFD400;
  --color-brand-dark: #2D2D2D;
  --color-brand-dark-blue: #1E293B;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-light: #f5f5f5;
  --color-gray-text: #666;
  --color-gray-dark: #444;
  --color-whatsapp: #075E54;
  --color-zoom: #0D47A1;
  --color-call: #e6b800;
  --color-email-blue: #2D8CFF;
  --color-font-dark-blue: #2A3741;
  --color-font-dark-gray: #333;
  --color-font-mid-gray: #555;
  --color-font-light-gray: #777;
  --color-font-slate: #2c3e50;
  --color-brand-yellow-dark: #e6be00;
  --color-brand-yellow-light: #FFD700;
  --color-social-facebook: #0165E1;
  --color-social-instagram: #5851DB;
  --color-social-linkedin: #0077B5;
  --color-gray-border: #ccc;
  --color-gray-border-light: #ddd;
  --color-font-darkest: #111;
  --color-font-dark: #222;
  --color-gray-light-alt: #f8f8f8;
  --color-price-green: #007b00;
  --color-whatsapp-light: #25d366;
  --color-whatsapp-light-hover: #1ebe5b;
  --color-zoom-light: #007bff;
  --color-zoom-light-hover: #0056c7;
  --color-blue-focus: #0078ff;
  --color-gray-hover: #e5e5f5;
  --color-gray-dots: #999;
  --color-gray-page-bg: #f9f9f9;
  --color-font-dark-alt: #1d1d1d;
  --color-item-bg-light: #f1f5f9;
  --color-item-bg-hover: #e8f0fe;
  --color-item-text: #004080;
  --color-gray-border-table: #eee;
  --color-white-alt: #fdfdfd;
  --color-text-danger: red;
  --color-valid-green: green;
  --color-invalid-red: red;
  --color-gray-border-lightest: #f0f0f0;
  --color-yellow-bg-hover: #FFFEF8;

  /* Fonts */
  --font-primary: 'Somar Sans', 'Open Sans', 'Helvetica Neue', sans-serif; /* <-- UPDATED */
  --font-secondary-ar: 'Somar Sans', 'Tajawal', 'Cairo', sans-serif;
}

/* ========================================================= */
/* 3. GLOBAL RESET (Combined from index.css and header.css) */
/* ========================================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary); /* <-- This now correctly uses 'Somar Sans' */
  font-weight: 400; /* <-- SETS THE DEFAULT WEIGHT TO 'Regular' */
  background: var(--color-white);
  color: var(--color-brand-dark);
}

body.ar {
  direction: rtl;
  text-align: right;
  font-family: var(--font-secondary-ar);
}

/* Set headings to use the bold font by default */
h1, h2, h3, h4, h5, h6, strong, b {
  font-weight: 700; /* <-- This will now correctly load 'SomarSans-Bold.otf' */
}