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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground transition-colors duration-300;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

/* Formula container styles */
.formula-container {
  @apply w-full py-4;
  overflow: visible !important;
}

/* KaTeX container styles */
.katex-display {
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.katex {
  @apply text-current;
  font-size: 1.1em !important;
  max-width: 100%;
  display: flex !important;
  justify-content: center !important;
}

.katex-html {
  max-width: 100%;
  overflow: visible !important;
}

/* Scale formulas on mobile */
@media (max-width: 640px) {
  .katex {
    font-size: 0.9em !important;
  }
  
  .katex-display > .katex {
    white-space: normal !important;
  }
  
  .katex .mfrac .frac-line {
    min-width: 0;
  }
  
  .katex .mspace {
    margin-right: 0 !important;
  }
  
  .katex .mord + .mrel {
    margin-left: 0.2em;
    margin-right: 0.2em;
  }
}

/* Dark mode formula styles */
.dark .katex {
  @apply text-gray-100;
}

.dark .katex .mord,
.dark .katex .mbin,
.dark .katex .mrel,
.dark .katex .mopen,
.dark .katex .mclose,
.dark .katex .mpunct,
.dark .katex .minner {
  @apply text-current;
}

/* Calculation section styles */
.calculation-section {
  @apply space-y-4 p-4 rounded-xl bg-white dark:bg-gray-800;
}

.calculation-title {
  @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.calculation-content {
  @apply space-y-2;
}

/* Formula block styles */
.formula-block {
  @apply p-4 rounded-lg bg-gray-50 dark:bg-gray-900;
  overflow: visible;
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.input-gradient-border {
  position: relative;
  border-radius: 0.75rem;
}

.input-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  padding: 2px;
  background: rgb(226, 232, 240);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

.input-gradient-border input {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Light theme styles */
.input-gradient-border:has(input:focus):has(.indigo-input)::before {
  background: rgb(199, 210, 254);
}

.input-gradient-border:has(input:focus):has(.purple-input)::before {
  background: rgb(233, 213, 255);
}

.input-gradient-border:has(input:focus):has(.pink-input)::before {
  background: rgb(251, 207, 232);
}

.input-gradient-border:has(input:focus):has(.blue-input)::before {
  background: rgb(191, 219, 254);
}

/* Dark theme styles */
.dark .input-gradient-border::before {
  background: rgba(99, 102, 241, 0.15);
}

.dark .input-gradient-border:has(input:focus)::before {
  background: conic-gradient(
    from var(--gradient-angle),
    rgba(99, 102, 241, 0.15) 0%,
    rgba(99, 102, 241, 0.15) 10%,
    rgba(129, 140, 248, 1) 20%,
    rgba(165, 180, 252, 1) 40%,
    rgba(99, 102, 241, 0.15) 50%,
    rgba(99, 102, 241, 0.15) 100%
  );
  animation: rotate 4s linear infinite;
}

input[type="number"] {
  @apply transition-colors duration-200 ease-in-out bg-white dark:bg-gray-900;
}

input[type="number"]:focus {
  @apply outline-none;
}

.gradient-bg {
  @apply bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800;
}

@layer utilities {
  .ease-spring {
    transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
}