@tailwind components;
@tailwind utilities;

@layer components {
  .all-\[unset\] {
    all: unset;
  }
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.thin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.medium.otf') format('opentype');
  font-weight: 450;
  font-style: normal;
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.bold.otf') format('opentype');
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.heavy.otf') format('opentype');
  font-weight: 800;
  font-style: bold;
}

@font-face {
  font-family: 'Fivo Sans';
  src: url('../fonts/fivo/fivo-sans.black.otf') format('opentype');
  font-weight: 900;
  font-style: bold;
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-family: 'Fivo Sans', Helvetica, sans-serif;
  }
}

:root {
  --body-font-family: "Fivo Sans", Helvetica;
  --body-font-size: 16px;
  --body-font-style: normal;
  --body-font-weight: 300;
  --body-large-font-family: "Fivo Sans", Helvetica;
  --body-large-font-size: 18px;
  --body-large-font-style: normal;
  --body-large-font-weight: 300;
  --body-large-letter-spacing: 0px;
  --body-large-line-height: 24px;
  --body-letter-spacing: 0px;
  --body-line-height: 22px;
  --color-1: rgba(0, 124, 50, 1);
  --color-2: rgba(254, 207, 18, 1);
  --color-3: rgba(0, 74, 173, 1);
  --color-4: rgba(47, 181, 99, 1);
  --color-5: rgba(0, 0, 0, 1);
  --color-6: rgba(255, 255, 255, 1);
  --color-7: rgba(209, 255, 227, 1);
  --color-8: rgba(214, 232, 255, 1);
  --h1-font-family: "Fivo Sans", Helvetica;
  --h1-font-size: 56px;
  --h1-font-style: normal;
  --h1-font-weight: 400;
  --h1-letter-spacing: 0px;
  --h1-line-height: 66px;
  --h2-font-family: "Fivo Sans", Helvetica;
  --h2-font-size: 36px;
  --h2-font-style: normal;
  --h2-font-weight: 400;
  --h2-letter-spacing: 0px;
  --h2-line-height: 46px;
  --h3-font-family: "Fivo Sans", Helvetica;
  --h3-font-size: 26px;
  --h3-font-style: normal;
  --h3-font-weight: 400;
  --h3-highlighted-font-family: "Fivo Sans", Helvetica;
  --h3-highlighted-font-size: 26px;
  --h3-highlighted-font-style: normal;
  --h3-highlighted-font-weight: 700;
  --h3-highlighted-letter-spacing: 0px;
  --h3-highlighted-line-height: 36px;
  --h3-letter-spacing: 0px;
  --h3-line-height: 36px;
  --h4-font-family: "Fivo Sans", Helvetica;
  --h4-font-size: 20px;
  --h4-font-style: normal;
  --h4-font-weight: 400;
  --h4-highlighted-font-family: "Fivo Sans", Helvetica;
  --h4-highlighted-font-size: 20px;
  --h4-highlighted-font-style: normal;
  --h4-highlighted-font-weight: 700;
  --h4-highlighted-letter-spacing: 0px;
  --h4-highlighted-line-height: 26px;
  --h4-letter-spacing: 0px;
  --h4-line-height: 26px;
  --small-font-family: "Fivo Sans", Helvetica;
  --small-font-size: 14px;
  --small-font-style: normal;
  --small-font-weight: 300;
  --small-highlighted-font-family: "Fivo Sans", Helvetica;
  --small-highlighted-font-size: 14px;
  --small-highlighted-font-style: normal;
  --small-highlighted-font-weight: 500;
  --small-highlighted-letter-spacing: 0px;
  --small-highlighted-line-height: 20px;
  --small-letter-spacing: 0px;
  --small-line-height: 20px;
}

:root {
  --animate-spin: spin 1s linear infinite;
}

.animate-fade-in {
  animation: fade-in 1s var(--animation-delay, 0s) ease forwards;
}

.animate-fade-up {
  animation: fade-up 1s var(--animation-delay, 0s) ease forwards;
}

.animate-marquee {
  animation: marquee var(--duration) infinite linear;
}

.animate-marquee-vertical {
  animation: marquee-vertical var(--duration) linear infinite;
}

.animate-shimmer {
  animation: shimmer 8s infinite;
}

.animate-spin {
  animation: var(--animate-spin);
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes image-glow {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
  }

  10% {
    opacity: 0.7;
    animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
  }

  to {
    opacity: 0.4;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shimmer {
  0%,
  90%,
  to {
    background-position: calc(-100% - var(--shimmer-width)) 0;
  }

  30%,
  60% {
    background-position: calc(100% + var(--shimmer-width)) 0;
  }
}

@keyframes marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes marquee-vertical {
  0% {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(-100% - var(--gap)));
  }
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: transparent;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: transparent;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}