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

@layer base {
  :root {
    --green: 156 71% 67%;
    --red: 351 89% 72%;
    --background: 0 0% 98%;
    --background-light: 0 0% 100%;
    --background-dark: 0 0% 96%;
    --foreground: 0 0% 9%;
    --foreground-dark: 0 0% 7.5%;
    --foreground-light: 0 0% 11%;
    --card: 0 0% 98%;
    --card-foreground: 0 0% 9%;
    --popover: 0 0% 98%;
    --popover-foreground: 0 0% 9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 9%;
    --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%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 9%;
    --background-dark: 0 0% 7.5%;
    --background-light: 0 0% 11%;
    --foreground: 0 0% 98%;
    --foreground-light: 0 0% 100%;
    --foreground-dark: 0 0% 96%;
    --card: 0 0% 9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --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 base {
  * {
    @apply border-border;
  }
  body {
    @apply !bg-[hsl(var(--background))] text-foreground font-sans text-base antialiased flex flex-col min-h-screen;
  }
}

@layer components {
  .container {
    @apply max-w-6xl mx-auto px-6 md:px-10 lg:px-14 w-full;
  }

  .pulled {
    @apply -mx-2 md:-mx-6 lg:-mx-10 xl:-mx-20;
  }

  .row {
    @apply flex flex-row;
  }

  .col {
    @apply flex flex-col;
  }

  .center-center {
    @apply flex items-center justify-center text-center;
  }
}

strong {
  @apply font-semibold;
}


.radial-gradient {
  background: #BECCDF;
  background: radial-gradient(at bottom, hsl(var(--background-light)), hsl(var(--background)));
}

.radial-gradient-dot-1 {
  background: #BECCDF;
  background: radial-gradient(at 50% 20%, hsl(var(--background-light)), transparent);
}

.radial-gradient-dot-pages {
  background: #BECCDF;
  background: radial-gradient(at 50% 50%, hsl(var(--background)), hsl(var(--background)/0.2));
}

.animated-iframe-gradient {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.animated-iframe-gradient:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1600px;
  height: 1600px;
  background: linear-gradient(250deg, hsl(var(--foreground)/0.9), transparent);
  
  animation: GradientRotate 8s linear infinite;
}
@keyframes GradientRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.line-before {
  position: relative;
  padding: 16px;
}
.line-before:before {
  content: '';
  display: block;
  position: absolute;
  top: calc(4px*-32);
  bottom: calc(4px*-32);
  left: 0;
  width: 1px;
  background: hsl(var(--foreground)/0.1);
}
.line-after {
  position: relative;
  padding: 16px;
}
.line-after:after {
  content: '';
  display: block;
  position: absolute;
  top: calc(4px*-32);
  bottom: calc(4px*-32);
  right: 0;
  width: 1px;
  background: hsl(var(--foreground)/0.1);
}

.animate-fade-up {
  animation: animateFadeUp 0.5s ease-in-out;
  animation-fill-mode: both; 
}

@keyframes animateFadeUp {
  0% { transform: translateY(0.5rem); scale: 0.95; }
  100% { transform: translateY(0); scale: 1; }
}

.animate-fade-down {
  animation: animateFadeDown 0.5s ease-in-out;
  animation-fill-mode: both;
}

@keyframes animateFadeDown {
  0% { transform: translateY(-1rem); }
  100% { transform: translateY(0); }
}

/* Docs */

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  font-size: inherit !important;
}

.prose pre {
  background: hsl(var(--background-dark));
  border: 1px solid hsl(var(--background-light));
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 12px;
}

.prose pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  border: none;
}

div[data-radix-scroll-area-viewport] > div[data-radix-scroll-area-content] {
  max-height: 400px;
}

div[data-radix-scroll-area-viewport] > div[data-radix-scroll-area-content] pre{
  max-height: none;
}