@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Custom styles for CalculatorBest */
: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%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.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 84% 4.9%;
  --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%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 94.1%;
}

* {
  border-color: hsl(var(--border));
}

body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

.dark {
  color-scheme: dark;
}

.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.bg-popover { background-color: hsl(var(--popover)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.text-destructive { color: hsl(var(--destructive-foreground)); }
.border-input { border-color: hsl(var(--input)); }
.border-muted { border-color: hsl(var(--border)); }
.border-border { border-color: hsl(var(--border)); }

.bg-primary\/10 { background-color: hsla(var(--primary), 0.1); }
.bg-primary\/20 { background-color: hsla(var(--primary), 0.2); }
.bg-primary\/90 { background-color: hsla(var(--primary), 0.9); }
.bg-background\/60 { background-color: hsla(var(--background), 0.6); }
.bg-background\/95 { background-color: hsla(var(--background), 0.95); }
.bg-secondary\/80 { background-color: hsla(var(--secondary), 0.8); }
.bg-muted\/50 { background-color: hsla(var(--muted), 0.5); }
.bg-destructive\/10 { background-color: hsla(var(--destructive), 0.1); }
.border-destructive\/20 { border-color: hsla(var(--destructive), 0.2); }
.hover\:border-primary\/30:hover { border-color: hsla(var(--primary), 0.3); }
.hover\:bg-accent:hover { background-color: hsl(var(--accent)); }
.hover\:text-accent-foreground:hover { color: hsl(var(--accent-foreground)); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }
.hover\:bg-secondary\/80:hover { background-color: hsla(var(--secondary), 0.8); }
.hover\:bg-primary\/90:hover { background-color: hsla(var(--primary), 0.9); }

/* Custom utility classes */
.prose {
  color: hsl(var(--foreground));
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Focus styles */
.focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Animation utilities */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Hover effects */
.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.active\:scale-\[0\.98\]:active {
  transform: scale(0.98);
}

.calculator-card-link {
  text-decoration: none;
}

.calculator-card-link:hover,
.calculator-card-link:focus-visible {
  background-color: hsla(var(--primary), 0.06);
}

.calculator-card-link:hover .calculator-card-action,
.calculator-card-link:focus-visible .calculator-card-action {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}