:root {
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "SF Pro Text", "Segoe UI", sans-serif;

  --sky-950: #0f172a;
  --sky-900: #082f49;
  --sky-800: #0e7490;
  --sky-700: #0891b2;
  --sky-500: #22d3ee;
  --sky-300: #7dd3fc;
  --amber-500: #f59e0b;
  --amber-300: #fcd34d;
  --mint-300: #6ee7b7;
  --slate-900: #0b1020;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-100: #f1f5f9;
  --white: #ffffff;

  --bg-main: linear-gradient(145deg, #e0f2fe 0%, #f0fdfa 38%, #fffbeb 100%);
  --bg-card: rgba(255, 255, 255, 0.78);
  --bg-card-strong: rgba(255, 255, 255, 0.9);
  --border-soft: rgba(8, 145, 178, 0.18);
  --shadow-soft: 0 20px 55px rgba(8, 116, 144, 0.15);
  --shadow-tight: 0 8px 24px rgba(15, 23, 42, 0.12);

  --container-width: 1180px;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --space-2xs: 0.35rem;
  --space-xs: 0.5rem;
  --space-sm: 0.85rem;
  --space-md: 1.2rem;
  --space-lg: 1.7rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  --transition-base: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[dir="rtl"] {
  direction: rtl;
}