/* ==========================================
   CSS Variables - משתנים גלובליים (מעודכן)
   assets/css/variables.css
   ========================================== */

:root {
  /* ===================
     צבעים עיקריים - פלטה רפואית-אסתטית
     =================== */
  --primary-color: #2c5282;        /* כחול רפואי עמוק */
  --primary-dark: #1a365d;         /* כחול כהה יותר */
  --primary-light: #4299e1;        /* כחול בהיר */
  --primary-lighter: #bee3f8;      /* כחול עדין */

  --secondary-color: #b7791f;      /* זהב מתון */
  --secondary-dark: #975a16;       /* זהב כהה */
  --secondary-light: #d69e2e;      /* זהב בהיר */
  --secondary-lighter: #f7fafc;    /* זהב עדין מאוד */

  /* צבעי מצב */
  --success-color: #38a169;        /* ירוק רפואי */
  --warning-color: #d69e2e;        /* כתום זהוב */
  --danger-color: #e53e3e;         /* אדום עדין */
  --info-color: #3182ce;           /* כחול מידע */

  /* ===================
     צבעי רקע ונויטרלים
     =================== */
  --dark-color: #1a202c;           /* כמעט שחור חם */
  --dark-light: #2d3748;           /* אפור כהה */
  --dark-medium: #4a5568;          /* אפור בינוני */
  
  --white: #ffffff;                /* לבן טהור */
  --light-bg: #f7fafc;            /* רקע עדין */
  --lighter-bg: #edf2f7;          /* רקע בהיר יותר */
  --cream-bg: #fefcfb;            /* קרם עדין */
  
  --border-color: #e2e8f0;        /* גבול עדין */
  --border-light: #f1f5f9;        /* גבול בהיר */
  --border-medium: #cbd5e0;       /* גבול בינוני */

  /* ===================
     צבעי טקסט - היררכיה ברורה
     =================== */
  --text-dark: #1a202c;           /* טקסט ראשי */
  --text-medium: #2d3748;         /* טקסט משני */
  --text-light: #4a5568;          /* טקסט עזר */
  --text-muted: #718096;          /* טקסט מושתק */
  --text-lighter: #a0aec0;        /* טקסט עדין */
  --text-white: #ffffff;          /* טקסט לבן */

  /* ===================
     גופנים וגדלים
     =================== */
  --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-heading: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;

  --font-size-h1: 3rem;           /* 48px */
  --font-size-h2: 2.5rem;         /* 40px */
  --font-size-h3: 2rem;           /* 32px */
  --font-size-h4: 1.5rem;         /* 24px */
  --font-size-h5: 1.25rem;        /* 20px */
  --font-size-h6: 1rem;           /* 16px */

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===================
     רווחים (Spacing)
     =================== */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  --spacing-4xl: 5rem;     /* 80px */
  --spacing-5xl: 6rem;     /* 96px */

  /* ===================
     גדלי קונטיינרים
     =================== */
  --container-width: 1200px;
  --container-padding: 20px;

  /* ===================
     עיגולי פינות
     =================== */
  --border-radius-xs: 3px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 50%;

  /* ===================
     צללים - עדינים ומקצועיים
     =================== */
  --shadow-xs: 0 1px 2px rgba(26, 32, 44, 0.05);
  --shadow-sm: 0 1px 3px rgba(26, 32, 44, 0.1), 0 1px 2px rgba(26, 32, 44, 0.06);
  --shadow-md: 0 4px 6px rgba(26, 32, 44, 0.07), 0 2px 4px rgba(26, 32, 44, 0.06);
  --shadow-lg: 0 10px 15px rgba(26, 32, 44, 0.1), 0 4px 6px rgba(26, 32, 44, 0.05);
  --shadow-xl: 0 20px 25px rgba(26, 32, 44, 0.1), 0 10px 10px rgba(26, 32, 44, 0.04);
  --shadow-2xl: 0 25px 50px rgba(26, 32, 44, 0.15);

  /* צללים צבעוניים */
  --shadow-primary: 0 4px 14px rgba(44, 82, 130, 0.15);
  --shadow-secondary: 0 4px 14px rgba(183, 121, 31, 0.15);
  --shadow-success: 0 4px 14px rgba(56, 161, 105, 0.15);

  /* ===================
     מעברים (Transitions)
     =================== */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-very-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===================
     גרדיאנטים - אלגנטיים ורפואיים
     =================== */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
  --gradient-dark: linear-gradient(135deg, var(--dark-color) 0%, var(--dark-light) 100%);
  --gradient-light: linear-gradient(135deg, var(--white) 0%, var(--light-bg) 100%);
  --gradient-medical: linear-gradient(135deg, #f7fafc 0%, #edf2f7 50%, #e2e8f0 100%);
  --gradient-gold: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary-color) 100%);

  /* ===================
     צבעים מיוחדים
     =================== */
  --whatsapp-color: #25d366;
  --whatsapp-dark: #128c7e;
  --accent-gold: #d4af37;          /* זהב מבריק */
  --medical-blue: #4a90e2;         /* כחול רפואי */
  --soft-mint: #f0fdf4;            /* מנטה עדין */

  /* ===================
     Z-Index שכבות
     =================== */
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-fixed: 1030;
  --z-sticky: 1020;

  /* ===================
     צבעי רקע לסקציות שונות
     =================== */
  --hero-bg: var(--gradient-primary);
  --section-bg-light: var(--light-bg);
  --section-bg-white: var(--white);
  --section-bg-cream: var(--cream-bg);
  --card-bg: var(--white);
  --footer-bg: var(--dark-color);

  /* ===================
     צבעי מצב לרכיבים
     =================== */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-hover: var(--primary-dark);
  --btn-secondary-bg: var(--secondary-color);
  --btn-secondary-hover: var(--secondary-dark);
  
  --input-border: var(--border-color);
  --input-focus: var(--primary-color);
  --input-bg: var(--white);

  /* ===================
     עיצוב אייקונים וגרפיקה
     =================== */
  --icon-primary: var(--primary-color);
  --icon-secondary: var(--secondary-color);
  --icon-muted: var(--text-muted);
  --icon-success: var(--success-color);

  /* ===================
     נגישות - ניגודיות משופרת
     =================== */
  --contrast-high: #000000;
  --contrast-medium: var(--text-dark);
  --contrast-low: var(--text-muted);
  --focus-color: var(--primary-color);
  --focus-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}