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

@layer base {
  :root {
    /* 240 1.5% 12% */
    --background: 240 0% 0%;
    --foreground: 0 0% 100%;
    --border: 240 3.7% 15.9%;

    /* perf review theme color */
    --perf-review-50: #f5f3ff;
    --perf-review-100: #ede9fe;
    --perf-review-200: #ddd6fe;
    --perf-review-300: #c4b5fd;
    --perf-review-400: #a78bfa;
    --perf-review-500: #8b5cf6;
    --perf-review-600: #7c3aed;
    --perf-review-700: #6d28d9;
    --perf-review-800: #5b21b6;
    --perf-review-900: #4c1d95;

    /* self review theme color */
    --self-review-50: #f0fdfa;
    --self-review-100: #ccfbf1;
    --self-review-200: #99f6e4;
    --self-review-300: #5eead4;
    --self-review-400: #2dd4bf;
    --self-review-500: #14b8a6;
    --self-review-600: #0d9488;
    --self-review-700: #0f766e;
    --self-review-800: #115e59;
    --self-review-900: #134e4a;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    /* font-feature-settings: "rlig" 1, "calt" 1; */
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    font-family: Arial, Helvetica, sans-serif;
  }
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@keyframes translateAnim {
  from {
    opacity: 0;
    transform: translateX(0px) translateY(24px) scale(1) translateZ(0px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.widget-animate.in-view {
  animation: translateAnim 1s ease;
}

.animation-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 #f87171;
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 20px rgba(229, 62, 62, 0);
  }

  100% {
    transform: scale(0.8);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% auto;
  animation: gradient 3s ease infinite;
}

.prose {
  max-width: 95% !important;
}
