/* Design tokens: validated against Figma Developer page (1:2).
   Colour ramps align with the Developer frames; white-on-green uses Secondary 600 for contrast. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Cairo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Secondary (brand green) */
  --secondary-50: #EBF4F2; --secondary-100: #C2DBD5; --secondary-200: #A5CAC1; --secondary-300: #7CB2A5; --secondary-400: #62A393;
  --secondary-500: #3B8C78; --secondary-600: #367F6D; --secondary-700: #2A6355; --secondary-800: #204D42; --secondary-900: #193B32;
  /* Primary (navy) */
  --primary-50: #E8EBEF; --primary-100: #B7C2CC; --primary-200: #94A5B4; --primary-300: #647C92; --primary-400: #45627D;
  --primary-500: #173B5C; --primary-600: #153654; --primary-700: #102A41; --primary-800: #0D2033; --primary-900: #0A1927;
  /* Orange */
  --orange-50: #FDF1E6; --orange-100: #F9D2B3; --orange-200: #F6BD8E; --orange-300: #F29F5A; --orange-400: #F08C3A;
  --orange-500: #EC6F09; --orange-600: #D76508; --orange-700: #A84F06; --orange-800: #823D05; --orange-900: #632F04;
  /* green */
  --green-50: #E6FAEE; --green-100: #B0EEC9; --green-200: #8AE6AF; --green-300: #54DB8A; --green-400: #33D473;
  --green-500: #00C950; --green-600: #00B749; --green-700: #008F39; --green-800: #006F2C; --green-900: #005422;
  /* Red */
  --red-50: #FFEAEB; --red-100: #FEBEC1; --red-200: #FD9EA3; --red-300: #FC7278; --red-400: #FC565E;
  --red-500: #FB2C36; --red-600: #E42831; --red-700: #B21F26; --red-800: #8A181E; --red-900: #691217;
  /* Gray */
  --gray-50: #F0F1F3; --gray-100: #D1D3D8; --gray-200: #BABEC6; --gray-300: #9BA1AB; --gray-400: #888E9B;
  --gray-500: #6A7282; --gray-600: #606876; --gray-700: #4B515C; --gray-800: #3A3F48; --gray-900: #2D3037;

  /* Basic */
  --color-bg: #F8FAF9;
  --color-text: #14232D;
  --color-text-muted: #60717A;
  --color-border: #DDE5E8;
  --color-white: #FFFFFF;

  /* Semantic aliases. White text on green uses Secondary 600 (4.76:1) instead of the design's 500 (4.03:1). */
  --color-brand: var(--secondary-500);
  --color-brand-strong: var(--secondary-600);
  --color-offer: var(--orange-700);
  --color-urgent: var(--red-700);

  --gradient-linear-one: linear-gradient(90deg, #173B5C 0%, #00C950 100%);
  --shadow-1: 0 4px 8px rgba(23, 59, 92, .15);

  --font-en: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ar: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font: var(--font-en);

  /* FALLBACK: spacing, radius, blur, layout */
  --shadow-brand: 0 4px 20px rgba(59, 140, 120, .15);
  --space-1: 4px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-22: 88px;
  --container: 1360px;
  --page-margin: 40px;
  --section-pad-y: 80px;
  --grid-gap: 24px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 16px; --radius-md-2: 20px; --radius-lg: 24px;
  --radius-xl: 32px; --radius-2xl: 40px; --radius-3xl: 48px; --radius-4xl: 56px; --radius-hero: 80px; --radius-pill: 999px;
  --blur-sm: 4px; --blur-md: 10px;
  --focus-color: var(--secondary-700);
  --header-h: 92px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root:lang(ar) { --font: var(--font-ar); }

@media (max-width: 1023px) { :root { --page-margin: 32px; --section-pad-y: 64px; } }
@media (max-width: 767px)  { :root { --page-margin: 20px; --section-pad-y: 48px; --grid-gap: 16px; } }