:root {
  --font-ar: "Cairo", "Segoe UI", sans-serif;
  --font-en: "Sora", "Segoe UI", sans-serif;
  --font-display: "Changa", "Cairo", sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.16vw, 0.94rem);
  --text-base: clamp(0.98rem, 0.93rem + 0.22vw, 1.08rem);
  --text-lg: clamp(1.12rem, 1.04rem + 0.32vw, 1.28rem);
  --text-xl: clamp(1.28rem, 1.18rem + 0.48vw, 1.6rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.72vw, 2rem);
  --text-3xl: clamp(1.95rem, 1.68rem + 1.2vw, 2.9rem);
  --text-4xl: clamp(2.4rem, 1.9rem + 1.95vw, 4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.8rem;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 22px rgba(10, 22, 45, 0.07);
  --shadow-md: 0 18px 42px rgba(10, 22, 45, 0.11);
  --shadow-lg: 0 32px 78px rgba(10, 22, 45, 0.15);

  --max-width: 1200px;
  --nav-height: 5rem;
  --transition-fast: 170ms ease;
  --transition-base: 280ms ease;
  --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
  --bg: #f4f7fc;
  --bg-soft: #e9effa;
  --surface: #ffffff;
  --surface-2: #f7f9ff;
  --surface-glass: rgba(255, 255, 255, 0.77);

  --text: #0a1630;
  --text-muted: #4a5f85;
  --text-subtle: #7486a8;

  --primary: #205090;
  --primary-strong: #18437b;
  --primary-soft: rgba(32, 80, 144, 0.12);
  --accent: #c07040;
  --accent-soft: rgba(192, 112, 64, 0.16);

  --border: rgba(20, 49, 94, 0.14);
  --outline: rgba(32, 80, 144, 0.42);

  --hero-gradient: radial-gradient(circle at 14% 20%, rgba(32, 80, 144, 0.22), transparent 45%), radial-gradient(circle at 86% 0%, rgba(192, 112, 64, 0.22), transparent 40%), linear-gradient(170deg, #f5f8ff 0%, #eaf0ff 52%, #f7efe9 100%);
  --panel-gradient: linear-gradient(140deg, rgba(32, 80, 144, 0.09), rgba(192, 112, 64, 0.12));
  --proof-gradient: linear-gradient(140deg, #205090 0%, #2e73b7 50%, #c07040 100%);

  --header-bg: rgba(244, 247, 252, 0.75);
  --header-border: rgba(20, 49, 94, 0.12);
}

[data-theme="dark"] {
  --bg: #080f1f;
  --bg-soft: #0f1b34;
  --surface: #111f3a;
  --surface-2: #142444;
  --surface-glass: rgba(17, 31, 58, 0.78);

  --text: #edf2fd;
  --text-muted: #b7c5e1;
  --text-subtle: #8ea2c9;

  --primary: #5f95da;
  --primary-strong: #79aae8;
  --primary-soft: rgba(95, 149, 218, 0.2);
  --accent: #d59057;
  --accent-soft: rgba(213, 144, 87, 0.21);

  --border: rgba(142, 168, 211, 0.2);
  --outline: rgba(115, 166, 235, 0.6);

  --hero-gradient: radial-gradient(circle at 14% 20%, rgba(95, 149, 218, 0.28), transparent 45%), radial-gradient(circle at 86% 0%, rgba(213, 144, 87, 0.22), transparent 40%), linear-gradient(170deg, #080f1f 0%, #0f1b34 52%, #1b2037 100%);
  --panel-gradient: linear-gradient(140deg, rgba(95, 149, 218, 0.18), rgba(213, 144, 87, 0.18));
  --proof-gradient: linear-gradient(140deg, #15315f 0%, #1f5186 50%, #8f5a38 100%);

  --header-bg: rgba(8, 15, 31, 0.72);
  --header-border: rgba(142, 168, 211, 0.2);
}

[dir="rtl"] {
  --font-body: var(--font-ar);
  --font-heading: var(--font-display);
}

[dir="ltr"] {
  --font-body: var(--font-en);
  --font-heading: var(--font-display);
}