@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  --background: #ffffff;
  --foreground: #171717;
  --Inter: "Inter", sans-serif;
  --primary: #fc7b00;
  --secondary: #091323;
  --gray-333: #333333;
  --gray-666: #666666;
  --gray-900: #181d27;
  --gray-600: #535862;
  --gray-300: #d5d7da;
  --gray-50: #fafafa;
  --gray-200: #e9eaeb;
  --gray-700: #344054;
  --navy-blue: #013d7a;
  --electric-orange: #fc7b00;
  --warm-shite: #faf9f6;
  --primary-color: #000000;
  --secondary-color: #ffffff;
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-Inter: var(--Inter);
  --color-primary: var(--primary);
  --color-gray-333: var(--gray-333);
  --color-gray-666: var(--gray-666);
  --color-gray-900: var(--gray-900);
  --color-gray-600: var(--gray-600);
  --color-gray-300: var(--gray-300);
  --color-gray-50: var(--gray-50);
  --color-gray-200: var(--gray-200);
  --color-gray-700: var(--gray-700);
  --color-secondary: var(--secondary);
}

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

body {
  background: var(--background);
  color: var(--foreground);
  @apply font-inter;
}

.primary-bg{
  background-color: var(--primary-color) !important;
}
.primary-text{
  color: var(--primary-color) !important;
}
.secondary-bg{
  background-color: var(--secondary-color) !important;
}
.secondary-text{
  color: var(--secondary-color) !important;
}