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

@layer base {
  :root {
    --background: 222 24% 5%;
    --foreground: 220 15% 96%;
    --card: 222 22% 8%;
    --card-foreground: 220 15% 96%;
    --popover: 222 22% 8%;
    --popover-foreground: 220 15% 96%;
    --primary: 187 96% 43%;
    --primary-foreground: 220 20% 10%;
    --secondary: 222 18% 12%;
    --secondary-foreground: 220 15% 96%;
    --muted: 222 18% 12%;
    --muted-foreground: 220 9% 58%;
    --accent: 168 72% 16%;
    --accent-foreground: 168 30% 92%;
    --destructive: 0 72% 48%;
    --destructive-foreground: 0 0% 100%;
    --border: 222 16% 18%;
    --input: 222 16% 18%;
    --ring: 187 96% 43%;
    --radius: 0.75rem;
  }

  * { @apply border-border; }
  html { overscroll-behavior: none; }

  body {
    @apply bg-background text-foreground font-mono antialiased;
    background-image:
      radial-gradient(circle at 12% -8%, rgba(45, 212, 191, 0.1), transparent 42%),
      radial-gradient(circle at 100% 8%, rgba(245, 158, 11, 0.08), transparent 38%),
      linear-gradient(180deg, rgba(9, 13, 20, 0.85) 0%, rgba(7, 10, 16, 0.98) 100%);
    min-height: 100vh;
    overflow-x: hidden;
  }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: rgba(45, 212, 191, 0.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.5); }

.cx-logo-text {
  font-family: Georgia, "Times New Roman", serif;
}
.cx-gradient {
  background: linear-gradient(135deg, #22d3ee, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}