:root {
  --color-primary: #1F2F3F;
  --color-primary-700: #162632;
  --color-teal: #C8A45A;
  --color-teal-700: #B8934A;
  --color-gold: #C8A45A;
  --color-gold-700: #B8934A;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F5F5F5;
  --color-surface: #ffffff;
  --color-text: #333333;
  --color-muted: #333333;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --shadow-soft: 0 16px 36px -28px rgba(11, 18, 32, 0.38);
  --shadow-hover: 0 22px 44px -28px rgba(11, 18, 32, 0.46);
  --shadow-focus: 0 0 0 4px rgba(200, 164, 90, 0.2);
  --surface-1: #F5F5F5;
  --surface-2: #F5F5F5;
  --font-base: "Cairo", sans-serif;
  --font-display: "Tajawal", "Cairo", sans-serif;
  --fs-h1: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h2: clamp(1.55rem, 2.4vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-h4: clamp(1.05rem, 1.3vw, 1.2rem);
  --content-max: 72ch;
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 31, 47, 63;
  --bs-secondary: #F5F5F5;
  --bs-secondary-rgb: 245, 245, 245;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-link-color: var(--color-teal-700);
  --bs-link-hover-color: var(--color-primary);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-color: #E5E7EB;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 0;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

.btn,
.cta-btn,
.hero-btn,
.detail-btn,
.submit-btn {
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 800;
  --bs-btn-padding-y: 0.56rem;
  --bs-btn-padding-x: 1.15rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn-primary,
.cta-btn,
.hero-btn,
.submit-btn {
  --bs-btn-bg: var(--color-teal);
  --bs-btn-border-color: var(--color-teal);
  --bs-btn-hover-bg: var(--color-teal-700);
  --bs-btn-hover-border-color: var(--color-teal-700);
  --bs-btn-active-bg: var(--color-teal-700);
  --bs-btn-active-border-color: var(--color-teal-700);
  --bs-btn-disabled-bg: var(--color-teal);
  --bs-btn-disabled-border-color: var(--color-teal);
  color: #fff;
  box-shadow: 0 10px 24px -16px rgba(201, 162, 74, 0.85);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: rgba(31, 42, 55, 0.28);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: #3c546b;
  --bs-btn-border-color: rgba(60, 84, 107, 0.36);
  --bs-btn-hover-bg: #3c546b;
  --bs-btn-hover-border-color: #3c546b;
  --bs-btn-hover-color: #fff;
}

.lang-btn {
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: rgba(31, 42, 55, 0.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
}

.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border-color: rgba(31, 42, 55, 0.16);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(184, 147, 63, 0.46);
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 74, 0.18);
}

.card,
.insurance-type-card,
.info-card,
.mission-card,
.news-card,
.featured-article,
.form-box,
.content-box,
.detail-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.card:hover,
.insurance-type-card:hover,
.info-card:hover,
.mission-card:hover,
.news-card:hover,
.detail-card:hover {
  box-shadow: var(--shadow-hover);
}