@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand Palette - Deep Institutional Navy & Royal Green / Emerald */
  --navy: #061e31;
  --navy-dark: #031320;
  --navy-surface: #0a273e;
  --navy-card: #0e304c;
  --navy-muted: #8ca3b5;
  --navy-light: #eef4f8;

  --emerald: #00b074;
  --emerald-hover: #009663;
  --emerald-dark: #007a51;
  --emerald-soft: #ecfdf5;
  --emerald-border: #a7f3d0;
  --emerald-glow: rgba(0, 176, 116, 0.25);

  --gold: #d4af37;
  --gold-soft: #fef9e7;
  --gold-border: #f9e79f;

  --ink: #0d1e2b;
  --ink-secondary: #334155;
  --muted: #64748b;
  --muted-light: #94a3b8;

  /* Surfaces & Backgrounds */
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --surface-elevated: #ffffff;

  /* Calm & Subtle Borders */
  --border-subtle: #e2e8f0;
  --border-card: #eef2f6;
  --border-hover: #cbd5e1;
  --border-focus: var(--emerald);
  --border-glass: rgba(255, 255, 255, 0.35);
  --border-glass-dark: rgba(255, 255, 255, 0.12);

  /* Glassmorphism Variables */
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg-dark: rgba(6, 30, 49, 0.78);
  --glass-blur: blur(16px) saturate(180%);
  --glass-blur-heavy: blur(24px) saturate(200%);

  /* Status Colors */
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --success: #10b981;

  /* Modern Radius Values */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Layered Subtle Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 2px 6px -1px rgba(16, 24, 40, 0.06), 0 1px 3px -1px rgba(16, 24, 40, 0.03);
  --shadow-md: 0 6px 16px -2px rgba(16, 24, 40, 0.06), 0 2px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-lg: 0 12px 32px -4px rgba(16, 24, 40, 0.08), 0 4px 12px -2px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 20px 48px -6px rgba(16, 24, 40, 0.12), 0 8px 16px -4px rgba(16, 24, 40, 0.04);
  --shadow-glass: 0 24px 64px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  --shadow-glass-dark: 0 24px 64px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;

  /* Layout & Spacing */
  --container: 1240px;
  --narrow: 800px;
  --header-height: 76px;

  /* Typography */
  --font-ar: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Cairo', 'IBM Plex Sans Arabic', -apple-system, sans-serif;
  --font-latin: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Easing */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s var(--ease-smooth);
  --transition-slow: 0.4s var(--ease-smooth);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}