@import url("non.geist");
@import url("non.geist/mono");

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

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@layer base {
  * {
    @apply border-grid-bright;
  }
  body {
    @apply bg-background-dimmed text-text-dimmed;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Text selection styles */
  ::selection {
    @apply bg-text-bright/30 text-text-bright;
  }
  ::-moz-selection {
    @apply bg-text-bright/30 text-text-bright;
  }
  
  /* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }
 
  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer utilities {
  .animated-gradient-glow {
    position: relative;
    overflow: visible;
  }

  .animated-gradient-glow::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    background: conic-gradient(
      from var(--gradient-angle),
      rgb(99 102 241),
      rgb(245 158 11),
      rgb(236 72 153),
      rgb(245 158 11),
      rgb(99 102 241)
    );
    border-radius: inherit;
    animation: gradient-rotation 3s linear infinite;
    pointer-events: none;
    filter: blur(0.5rem);
    opacity: 0.1;
  }
}

@keyframes gradient-rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}