@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

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

:root {
  --font-satoshi: "Satoshi", var(--font-geist-sans), sans-serif;
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
  --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 {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  --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%;
}

* {
  @apply border-border;
}

body {
  font-family: var(--font-satoshi);
  @apply bg-background text-foreground;
}

html,
body {
  @apply transition-colors duration-500 bg-background text-foreground;
  body {
    font-family: "Satoshi", "Geist Sans", sans-serif;
  }
}

pre {
  position: relative;
  padding: 1rem;
  border-radius: 8px;
}

button.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #2d2d2d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

button.copy:hover {
  background: #4a4a4a;
}

.frontmatter {
  display: none;
}

[data-rehype-pretty-code-fragment] {
  @apply relative;
}

[data-rehype-pretty-code-fragment] code {
  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
  @apply text-[12px] leading-6;
  @apply text-[#d4d4d4];
}

[data-language] {
  @apply text-[#d4d4d4];
}

.token.comment {
  @apply text-[#6A9955];
}
.token.string {
  @apply text-[#CE9178];
}
.token.function {
  @apply text-[#DCDCAA];
}
.token.keyword {
  @apply text-[#569CD6];
}
.token.number {
  @apply text-[#B5CEA8];
}
.token.class-name {
  @apply text-[#4EC9B0];
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-left: 1px solid transparent;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border, 215 16% 47% / 0.2));
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--border, 215 16% 47% / 0.4));
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border, 215 16% 47% / 0.2)) transparent;
}

@layer utilities {
  .lustre-text {
    @apply inline-block font-extrabold text-transparent bg-clip-text bg-[length:200%_auto] bg-[position:0%_center];
  }

  .lustre-light {
    background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.3) 30%,
      rgba(0, 0, 0, 0.7) 45%,
      #ffffff 50%,
      rgba(0, 0, 0, 0.7) 55%,
      rgba(0, 0, 0, 0.3) 70%,
      rgba(0, 0, 0, 0.05) 100%
    );
  }

  .lustre-dark {
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0.4) 45%,
      #ffffff 50%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 0.15) 70%,
      rgba(255, 255, 255, 0.05) 100%
    );
  }
}

.bg-gradient-radial {
  background: linear-gradient(
    to bottom,
    rgba(12, 12, 14, 1) 0%,
    rgba(8, 8, 12, 1) 100%
  );
  background-size: 100% 100%;
}

@keyframes pulse-glow {
  0% {
    filter: drop-shadow(0 0 5px rgba(240, 219, 79, 0.1));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(240, 219, 79, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(240, 219, 79, 0.1));
  }
}

.animate-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes spin-once {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-once {
  animation: spin-once 0.6s ease-out;
}

video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  background: black;
  transition: opacity 0.4s ease;
}

.text-stroke-light {
  color: white;
  -webkit-text-stroke: 1px black;
}

.dark .text-stroke-light {
  color: black;
  -webkit-text-stroke: 1px white;
}

::selection {
  @apply bg-black text-white;
}

.dark ::selection {
  @apply bg-white text-black;
}
