/* ==========================================
   AL TAIF EYE CENTER - DESIGN SYSTEM TOKENS
   ========================================== */

:root {
  /* Color Palette - Clinical Precision & 5-Star Hospitality */
  --color-primary: #0b2545;
  --color-primary-dark: #061830;
  --color-primary-light: #134074;
  --color-primary-subtle: #ebf3fa;
  
  --color-accent: #00c6ff;
  --color-accent-gradient: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  --color-accent-glow: rgba(0, 198, 255, 0.35);
  --color-laser: #00f0ff;
  
  --color-bg-light: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-bg-slate: #f1f5f9;
  --color-bg-dark: #0b1329;
  
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  --color-text-inverse: #ffffff;

  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Fonts - Equal weight & parity for English and Arabic */
  --font-en: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ar: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-family: var(--font-en); /* Set dynamically by Router */

  /* Elevation & Glassmorphism Shadows */
  --shadow-sm: 0 2px 4px rgba(11, 37, 69, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 16px 36px rgba(11, 37, 69, 0.12);
  --shadow-hover: 0 20px 40px rgba(0, 198, 255, 0.18);
  --shadow-glow: 0 0 25px var(--color-accent-glow);

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Full Width Fluid Layout Spacing */
  --header-height: 84px;
  --topbar-height: 40px;
  --container-max-width: 1680px;
  --container-fluid-padding: clamp(1.25rem, 4vw, 3.5rem);
}

/* RTL Specific Overrides for Font Family */
[dir="rtl"] {
  --font-family: var(--font-ar);
}
[dir="ltr"] {
  --font-family: var(--font-en);
}