@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Primary */
  --color-teal:        #2B7A84;
  --color-teal-dark:   #1E5F67;
  --color-teal-light:  #3A9BA6;

  /* Accent */
  --color-orange:      #E8972C;
  --color-orange-dark: #D07E1A;

  /* Neutrals */
  --color-navy:        #1A3A4A;
  --color-dark:        #0F2A36;
  --color-gray-700:    #4A5568;
  --color-gray-400:    #A0AEC0;
  --color-gray-200:    #E2E8F0;
  --color-gray-100:    #F5F5F5;
  --color-white:       #FFFFFF;

  /* Typography — Arabic PRIMARY */
  --font-heading-ar:  'IBM Plex Sans Arabic', sans-serif;
  --font-body-ar:     'Noto Sans Arabic', sans-serif;

  /* Typography — English SECONDARY */
  --font-heading-en:  'Outfit', sans-serif;
  --font-body-en:     'DM Sans', sans-serif;

  /* Monospace */
  --font-mono:        'JetBrains Mono', monospace;

  /* Type Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  /* Line Height */
  --leading-tight:   1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-wide:   1400px;
  --grid-gap:         var(--space-8);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
}