@import "tailwindcss";

:root {
  --radius: 1rem;

  --background: hsl(0 0% 100% / 0.6);
  --foreground: hsl(240 10% 20%);

  --card: hsl(0 0% 100% / 0.65);
  --card-foreground: hsl(240 10% 20%);

  --popover: hsl(0 0% 100% / 0.8);
  --popover-foreground: hsl(240 10% 20%);

  /* Modern Blue */
  --primary: hsl(221 83% 53%);
  --primary-foreground: hsl(0 0% 100%);

  --secondary: hsl(221 30% 95%);
  --secondary-foreground: hsl(221 60% 30%);

  --muted: hsl(240 5% 96%);
  --muted-foreground: hsl(240 5% 45%);

  --accent: hsl(330 80% 94%);
  --accent-foreground: hsl(330 70% 40%);

  --destructive: hsl(348 83% 58%);
  --destructive-foreground: hsl(0 0% 100%);

  --success: hsl(150 70% 40%);
  --warning: hsl(38 95% 55%);

  --border: hsl(240 10% 90% / 0.5);
  --input: hsl(240 10% 90% / 0.5);
  --ring: hsl(221 83% 53%);

  --sidebar: hsl(0 0% 100% / 0.6);
  --sidebar-foreground: hsl(240 10% 30%);
  --sidebar-muted: hsl(240 5% 92%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-muted: var(--sidebar-muted);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

@theme {
  --text-xs: 0.875rem;
  --text-xs--line-height: 1.4;
  --text-sm: 1rem;
  --text-sm--line-height: 1.45;
  --text-base: 1.125rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.25rem;
  --text-lg--line-height: 1.5;
  --text-xl: 1.375rem;
  --text-xl--line-height: 1.4;
  --text-2xl: 1.625rem;
  --text-2xl--line-height: 1.3;
  --text-3xl: 2rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.375rem;
  --text-4xl--line-height: 1.1;
  --text-5xl: 3.125rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.875rem;
  --text-6xl--line-height: 1;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: hsl(240 5.9% 80%);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: hsl(240 5.9% 65%);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-toast-in {
  animation: toast-in 0.25s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-overlay-in {
  animation: overlay-in 0.15s ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-dialog-in {
  animation: dialog-in 0.2s ease-out;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-skeleton {
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}