/* Dr. Islam Elsagher - Official Brand Colors */
/* Based on official brand identity PDF - NEVER CHANGE THESE VALUES */

:root {
  /* Official Brand Colors */
  --brand-primary: #BEB093;     /* Warm Beige - RGB: 190, 176, 147 */
  --brand-secondary: #777669;   /* Professional Gray - RGB: 119, 118, 105 */
  
  /* Derived Supporting Colors */
  --brand-light: #F4F1E8;       /* Light beige for sections */
  --brand-dark: #5C5A52;        /* Dark olive for deep text */
  --brand-white: #FFFFFF;       /* Clean medical white */
  
  /* Semantic Colors */
  --color-hero-bg: var(--brand-primary);
  --color-nav: var(--brand-secondary);
  --color-cta: var(--brand-primary);
  --color-cta-hover: var(--brand-secondary);
  --color-text-primary: var(--brand-dark);
  --color-text-secondary: var(--brand-secondary);
  --color-section-bg: var(--brand-light);
  
  /* WhatsApp Integration */
  --whatsapp-bg: var(--brand-primary);
  --whatsapp-hover: var(--brand-secondary);
  --whatsapp-text: var(--brand-white);
}

/* Brand Color Classes */
.brand-primary { color: var(--brand-primary); }
.brand-secondary { color: var(--brand-secondary); }
.bg-brand-primary { background-color: var(--brand-primary); }
.bg-brand-secondary { background-color: var(--brand-secondary); }
.bg-brand-light { background-color: var(--brand-light); }

/* CTA Button Styling */
.btn-whatsapp {
  background-color: var(--whatsapp-bg);
  color: var(--whatsapp-text);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-whatsapp:hover {
  background-color: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(190, 176, 147, 0.3);
}

/* Arabic RTL Support */
html {
  font-family: 'Cairo', sans-serif;
}

/* Responsive Typography */
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--brand-secondary);
  margin-bottom: 1.5rem;
}

/* Medical Professional Styling */
.credentials-bar {
  background: rgba(190, 176, 147, 0.1);
  border-left: 4px solid var(--brand-primary);
  padding: 1rem;
  margin: 1rem 0;
}

[dir="rtl"] .credentials-bar {
  border-left: none;
  border-right: 4px solid var(--brand-primary);
}