@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

:root {
  color-scheme: light;
  --color-primary: #0F6E56;
  --color-primary-dark: #04342C;
  --color-primary-light: #E1F5EE;
  --color-secondary: #D85A30;
  --color-secondary-soft: #F8E8E1;
  --color-accent: #1A8A7A;
  --color-accent-soft: #D8F3EC;
  --color-sand: #EDE8DC;
  --color-sand-deep: #C9C2B2;
  --color-error-soft: #F8E8E1;
  --color-neutral: #D3D1C7;
  --color-neutral-soft: #F5F4F0;
  --color-neutral-wash: #F5F4F0;
  --color-white: #FFFFFF;
  --color-bg: #F7F8F4;
  --color-bg-alt: #EEF6F2;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3FAF7;
  --color-text: #04342C;
  --color-text-muted: rgba(4, 52, 44, 0.72);
  --color-primary-muted: rgba(4, 52, 44, 0.72);
  --color-primary-glow: rgba(15, 110, 86, 0.14);
  --color-secondary-glow: rgba(216, 90, 48, 0.14);
  --color-shadow: rgba(4, 52, 44, 0.1);
  --color-border: rgba(211, 209, 199, 0.9);
  --gradient-hero: linear-gradient(145deg, #E1F5EE 0%, #F7F8F4 42%, #EDE8DC 100%);
  --gradient-band: linear-gradient(135deg, #04342C 0%, #0F6E56 55%, #1A8A7A 100%);
  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F3FAF7 100%);
  --gradient-soft: linear-gradient(160deg, #D8F3EC 0%, #F5F4F0 100%);
  --header-bg: rgba(255, 255, 255, 0.72);
  --footer-bg: linear-gradient(180deg, #E1F5EE 0%, #F5F4F0 100%);
  --font-family: "IBM Plex Sans Arabic", sans-serif;
  --radius-button: 12px;
  --radius-card: 1.25rem;
  --radius-full: 999px;
  --shadow-soft: 0 8px 28px var(--color-shadow);
  --shadow-lift: 0 16px 40px rgba(4, 52, 44, 0.14);
  --container: 1180px;
  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --space-3: 1.1rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-nav: 15px;
  --fs-btn: 15px;
  --fs-label: 15px;
  --fs-footer: 16px;
  --fs-badge: 14px;
  --fs-icon-sm: 1rem;
  --fs-icon-md: 1.2rem;
  --fs-icon-lg: 1.5rem;
  --fs-stat: 1.75rem;
  --fs-trust: clamp(2rem, 4vw, 2.75rem);
  --logo-height: 2.4rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.45s
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #2BBF97;
  --color-primary-dark: #E7F7F1;
  --color-primary-light: #12352E;
  --color-secondary: #E07A4F;
  --color-secondary-soft: #3A241C;
  --color-accent: #3DD6B5;
  --color-accent-soft: #16453C;
  --color-sand: #1C2A26;
  --color-sand-deep: #2A3B36;
  --color-error-soft: #3A241C;
  --color-neutral: #3A4A45;
  --color-neutral-soft: #14241F;
  --color-neutral-wash: #101E1A;
  --color-white: #0B1613;
  --color-bg: #081210;
  --color-bg-alt: #0E1C18;
  --color-surface: #12211D;
  --color-surface-2: #163028;
  --color-text: #E7F7F1;
  --color-text-muted: rgba(231, 247, 241, 0.72);
  --color-primary-muted: rgba(231, 247, 241, 0.72);
  --color-primary-glow: rgba(43, 191, 151, 0.18);
  --color-secondary-glow: rgba(224, 122, 79, 0.2);
  --color-shadow: rgba(0, 0, 0, 0.35);
  --color-border: rgba(58, 74, 69, 0.95);
  --gradient-hero: linear-gradient(145deg, #0E221D 0%, #081210 48%, #163028 100%);
  --gradient-band: linear-gradient(135deg, #062019 0%, #0F6E56 50%, #1A8A7A 100%);
  --gradient-card: linear-gradient(180deg, #12211D 0%, #163028 100%);
  --gradient-soft: linear-gradient(160deg, #12352E 0%, #101E1A 100%);
  --header-bg: rgba(12, 28, 24, 0.78);
  --footer-bg: linear-gradient(180deg, #12352E 0%, #0B1613 100%)
}