@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@import 'fumadocs-twoslash/twoslash.css';
@import 'fumadocs-openapi/css/preset.css';
@import '@fumadocs/story/css/preset.css';
@import '@fumadocs/asyncapi/css/preset.css';
@import '@fumadocs/graphql/css/preset.css';
@import '@fumari/sponsors/style.css';
@plugin 'tailwindcss-animate';

@theme {
  --spacing-page: 1436px;
  --color-brand: hsl(26, 73%, 51%);
  --color-brand-foreground: white;
  --color-brand-secondary: #c6bb58;
  --color-brand-secondary-foreground: #97890c;
  --color-brand-200: hsl(33, 100%, 50%);

  --color-landing-foreground: #59592a;
  --color-landing-foreground-200: #a8a866;
}

.dark {
  --color-landing-foreground: #e4e2d0;
  --color-landing-foreground-200: #b7af7e;

  --color-brand: #fff383;
  --color-brand-secondary: #fc7744;
  --color-brand-secondary-foreground: #521700;
  --color-brand-foreground: black;
  --color-brand-200: #fff7c8;
}

@theme inline {
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }

  @keyframes stroke {
    from {
      stroke-dasharray: 1000;
    }
    to {
      stroke-dasharray: 1000;
      stroke-dashoffset: 2000;
    }
  }

  --animate-stroke: stroke 5s linear infinite;

  --color-gradient-radial: radial-gradient(circle, var(--tw-gradient-stops));
  --color-repeat-gradient-to-r: repeating-linear-gradient(to right, var(--tw-gradient-stops));
  --color-repeat-gradient-to-br: repeating-linear-gradient(
    to bottom right,
    var(--tw-gradient-stops)
  );
}

.ui {
  --color-fd-primary: var(--ui-color);
}

.headless {
  --color-fd-primary: var(--headless-color);
}

.framework {
  --color-fd-primary: var(--framework-color);
}

:root {
  --headless-color: hsl(250, 80%, 54%);
  --framework-color: hsl(41, 100%, 40%);
  --ui-color: hsl(217, 100%, 58%);
}

html {
  scrollbar-gutter: stable;
}

html > body[data-scroll-locked] {
  margin-right: 0px !important;
  --removed-body-scroll-bar-size: 0px !important;
}

body {
  background-color: var(--color-fd-background);
}

.dark {
  --headless-color: hsl(250 100% 80%);
  --framework-color: #fff383;
  --ui-color: #a9ceff;
}

@keyframes circuit_1 {
  0% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes circuit_1_x_energy {
  0%,
  46% {
    opacity: 0;
    transform: translateX(-20px);
  }
  47%,
  70% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
    transform: translateX(212px);
  }
}
