@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plusjakartasans-var.woff2') format('woff2-variations'), url('../fonts/plusjakartasans-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2-variations'), url('../fonts/manrope-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo-var-arabic.woff2') format('woff2-variations'), url('../fonts/cairo-var-arabic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  /* Palette */
  --color-bg: #FBF9F4;
  --color-bg-alt: #F3EFE6;
  --color-surface: #FFFFFF;
  --color-ink: #132029;
  --color-ink-soft: #51616B;
  --color-ink-faint: #8C99A1;
  --color-accent: #0E5676;
  --color-accent-deep: #0A3F57;
  --color-accent-tint: #E7F0F4;
  --color-secondary: #7EAFC3;
  --color-secondary-soft: #E9F1F4;
  --color-border: rgba(19, 32, 41, 0.09);
  --color-border-strong: rgba(19, 32, 41, 0.16);
  --color-success: #2F7D5A;
  --color-success-tint: #EAF5EF;
  --color-error: #B4432F;
  --color-error-tint: #FBECE8;

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Manrope', sans-serif;
  --font-body: 'Manrope', 'Plus Jakarta Sans', sans-serif;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* Shadow (warm-tinted, never pure black) */
  --shadow-sm: 0 1px 2px rgba(19, 32, 41, 0.06), 0 1px 1px rgba(19, 32, 41, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(19, 32, 41, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(19, 32, 41, 0.25);
  --shadow-accent: 0 14px 32px -10px rgba(14, 86, 118, 0.4);

  /* Layout */
  --container-w: 1220px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad-y: clamp(4rem, 9vw, 7.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;
}

[dir='rtl'] {
  --font-display: 'Cairo', 'Manrope', sans-serif;
  --font-body: 'Cairo', 'Manrope', sans-serif;
}