@import "tailwindcss";

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 4px);
  --radius-sm: calc(var(--radius) - 8px);
}

@layer base {
  :root {
    --background: 222 36% 8%;
    --foreground: 210 40% 96%;

    --card: 222 31% 12%;
    --card-foreground: 210 40% 96%;

    --primary: 191 95% 67%;
    --primary-foreground: 222 47% 11%;

    --secondary: 223 24% 18%;
    --secondary-foreground: 210 40% 96%;

    --muted: 223 19% 22%;
    --muted-foreground: 214 18% 70%;

    --accent: 222 24% 17%;
    --accent-foreground: 210 40% 96%;

    --destructive: 0 72% 56%;
    --destructive-foreground: 0 0% 100%;

    --border: 223 17% 22%;
    --input: 223 17% 22%;
    --ring: 191 95% 67%;

    --radius: 1.5rem;
  }

  * {
    @apply border-border;
  }

  html {
    color-scheme: dark;
  }

  body {
    @apply min-h-screen bg-background text-foreground antialiased;
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    background-image:
      radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 0 32%),
      radial-gradient(circle at 80% 18%, rgba(14, 165, 233, 0.08), transparent 0 22%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%),
      linear-gradient(135deg, #080d16 0%, #0d1320 52%, #090d16 100%);
  }

  #root {
    min-height: 100vh;
  }

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

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.35);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}