/* ================= NEO SANS ARABIC FONTS ================= */

@font-face {
  font-family: "Neo Sans Arabic";
  src: url("../assets/fonts/neosanSarabic-light-webfont.woff2") format("woff2"),
       url("../assets/fonts/neosanSarabic-light-webfont.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Neo Sans Arabic";
  src: url("../assets/fonts/neosanSarabic-webfont.woff2") format("woff2"),
       url("../assets/fonts/neosanSarabic-webfont.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Neo Sans Arabic";
  src: url("../assets/fonts/neosanSarabic-medium-webfont.woff2") format("woff2"),
       url("../assets/fonts/neosanSarabic-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Neo Sans Arabic";
  src: url("../assets/fonts/neosanSarabic-bold-webfont.woff2") format("woff2"),
       url("../assets/fonts/neosanSarabic-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Neo Sans Arabic";
  src: url("../assets/fonts/neosanSarabic-black-webfont.woff2") format("woff2"),
       url("../assets/fonts/neosanSarabic-black-webfont.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}

/* ================= END FONTS ================= */

:root {
  /* Colors */
  --color-primary: #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-primary-light: #e0f2fe;

  --color-gray-100: #f3f4f6;
  --color-gray-300: #d1d5db !important;
  --color-gray-400: #9ca3af !important;
  --color-gray-700: #374151;

  --color-white: #ffffff;

  /* Typography */
  --font-family: Arial, sans-serif;
  --font-size: 14px;
  --font-weight-medium: 500;

  /* Spacing */
  --btn-padding-y: 10px;
  --btn-padding-x: 16px;

  /* Radius */
  --radius-md: 8px;

  /* Transition */
  --transition: 0.2s ease;
}

/* ================= TYPOGRAPHY ================= */

:root {
  /* Font Family */
  --font-primary: "Neo Sans Arabic", Arial, sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-semibold: 500;


  /* ================= DESKTOP ================= */

  /* Display */
  --display-1: 72px;
  --display-2: 64px;
  --display-3: 58px;

  /* Headline */
  --headline-1: 46px;
  --headline-2: 36px;
  --headline-3: 28px;

  /* Title */
  --title-1: 22px;
  --title-2: 20px;

  /* Body */
  --body-1: 18px;
  --body-2: 16px;
  --body-3: 14px;
  --body-4: 12px;

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.4;
  --lh-loose: 1.6;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {
  :root {
    --display-1: 38px;
    --display-2: 34px;
    --display-3: 30px;

    --headline-1: 26px;
    --headline-2: 24px;
    --headline-3: 22px;

    --title-1: 20px;
    --title-2: 18px;

    --body-1: 16px;
    --body-2: 14px;
    --body-3: 12px;
    --body-4: 10px;
  }
}

:root {

  /* ================= BASE ================= */
  --color-white: #ffffff;
  --color-black: #000000;

/* ================= NEUTRAL (GRAY) ================= */
--gray-50:  #F4F5F6;
--gray-100: #E6E8EA;
--gray-200: #D1D5D8;
--gray-300: #B9BEC3;
--gray-400: #9FA6AD;
--gray-500: #7E868C;
--gray-600: #5F676D; /* MAIN */
--gray-700: #4A5156;
--gray-800: #353A3E;
--gray-900: #1F2326;

  /* ================= PRIMARY (FIGMA EXACT) ================= */
--primary-50:  #E6E9EE;
--primary-100: #CDD3DD;
--primary-200: #B4BDCB;
--primary-300: #9BA7BA;
--primary-400: #697C98;
--primary-500: #375075;
--primary-600: #052453; /* MAIN */
--primary-700: #04193A;
--primary-800: #03122A;
--primary-900: #020B19;

  /* ================= SECONDARY ================= */
  --secondary-50:  #E6EEF6;
  --secondary-100: #CCDDED;
  --secondary-200: #B3CCE4;
  --secondary-300: #99BBDB;
  --secondary-400: #6698C9;
  --secondary-500: #3376B7;
  --secondary-600: #0054A5; /* MAIN */
  --secondary-700: #003B73;
  --secondary-800: #002A53;
  --secondary-900: #001932;

  /* ================= BLUE ================= */
  --blue-50:  #ECF3FF;
  --blue-100: #DAE7FF;
  --blue-200: #C7DCFF;
  --blue-300: #B5D0FF;
  --blue-400: #8FB8FF;
  --blue-500: #6AA1FF;
  --blue-600: #4589FF;
  --blue-700: #3060B3;
  --blue-800: #234580;
  --blue-900: #15294D;

  /* ================= GREEN ================= */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #62BA46;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;

  /* ================= RED ================= */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* ================= ORANGE ================= */
  --orange-50:  #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;

  /* ================= YELLOW ================= */
  --yellow-50:  #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;

  /* ================= PURPLE ================= */
  --purple-50:  #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;

  /* ================= CYAN ================= */
  --cyan-50:  #E6F6FC;
  --cyan-100: #CCEDF9;
  --cyan-200: #B3E3F6;
  --cyan-300: #99DAF3;
  --cyan-400: #66C8EC;
  --cyan-500: #33B5E6;
  --cyan-600: #00A3E0; /* MAIN BUTTON */
  --cyan-700: #00729D;
  --cyan-800: #005270;
  --cyan-900: #003143;

  /* ================= SEMANTIC (USE THESE IN COMPONENTS) ================= */
  --color-primary: var(--primary-600);
  --color-secondary: var(--secondary-600);

  --color-text: var(--gray-900);
  --color-text-light: var(--gray-600);

  --color-background: var(--gray-50);
  --color-border: var(--gray-200);
}