@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@tailwind utilities;

@theme {
  --color-main-blue: #1D305B;
  --color-main-orange: #FF6400;
  --color-light-blue: #223b70;
  --font-main: var(--font-alexandria);
  --font-almarai: var(--font-Almarai);
  --font-sans: var(--font-alexandria); 
}

@layer utilities {
  .container{
    max-width: 1025px;
    margin-inline: auto;
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);  
  font-family: var(--font-alexandria), sans-serif;
}