@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-poppins);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Custom brand colors (Tailwind v4 tokens) */
  --color-primary: #002087;
  --color-mid-primary: #133EC3;
  --color-primary-light: #265BFF;
  --color-secondary: #0F2A81;
  --color-third: #00B8D4;
  --color-accent-green: #00D084;
  --color-accent-yellow: #FDB813;
  --color-basewhite: #FFFFFF;
  --color-dull-black: #464646;
  --color-base-light: #F3F4F6;
  --color-base-text: #333333;
  --color-base-muted: #6B7280;
  --color-dark-blue: #030A2D;
  --color-dullgray: #fafafa;
}

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

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

.gradientBackground {
  background: radial-gradient(
      100% 100% at var(--g3-3-x-position) var(--g3-3-y-position),
      #040e2d -80%,
      transparent
    ),
    radial-gradient(
      100% 100% at var(--g3-1-x-position) var(--g3-1-y-position),
      #014173 -71%,
      transparent
    ),
    radial-gradient(
      100% 100% at var(--g3-2-x-position) var(--g3-2-y-position),
      #040e2d -52%,
      transparent
    ),
    #21213b;
  animation-name: g-3;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  transition-timing-function: ease-in;
}
@property --g3-1-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 16.09375%;
}
@property --g3-1-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 33.12500000000001%;
}
@property --g3-2-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 48.55468750000001%;
}
@property --g3-2-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 9.648437500000002%;
}
@property --g3-3-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78.6328125%;
}
@property --g3-3-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 79.8046875%;
}
:root {
  --g3-1-x-position: 16.09375%;
  --g3-1-y-position: 33.12500000000001%;
  --g3-2-x-position: 48.55468750000001%;
  --g3-2-y-position: 9.648437500000002%;
  --g3-3-x-position: 78.6328125%;
  --g3-3-y-position: 79.8046875%;
}
@keyframes g-3 {
  50% {
    --g3-1-x-position: 42.69531250000001%;
    --g3-1-y-position: 91.5625%;
    --g3-2-x-position: 91.7578125%;
    --g3-2-y-position: 33.046875%;
    --g3-3-x-position: 5.742187500000001%;
    --g3-3-y-position: 5.546875000000001%;
  }
}
/* Infinite logo scroller keyframes */
@keyframes scroll {
  0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
}
 

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  2. Create a class that uses this animation
*/
.logo-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}