@import "tailwindcss";

@theme inline {
  /* Updated to use the CSS variable generated by Next.js */
  --font-mono: var(--font-vt323), monospace;
  --font-sans: var(--font-vt323), monospace;
  --radius: 0rem;
}

:root {
  /* Pure Black & Green Terminal Theme */
  --background: #000000;
  /* Brightened the green to a classic phosphor green */
  --foreground: #33ff00;

  --card: #050505;
  --card-foreground: #33ff00;

  --popover: #000000;
  --popover-foreground: #33ff00;

  --primary: #33ff00;
  --primary-foreground: #000000;

  --secondary: #002200;
  --secondary-foreground: #33ff00;

  --muted: #001100;
  --muted-foreground: #008800;

  --accent: #003300;
  --accent-foreground: #33ff00;

  --destructive: #cc0000;
  --destructive-foreground: #000000;

  --border: #004400;
  --input: #004400;
  --ring: #33ff00;

  --radius: 0rem;
}

.dark {
  --background: #000000;
  --foreground: #33ff00;
  --card: #050505;
  --card-foreground: #33ff00;
  --popover: #000000;
  --popover-foreground: #33ff00;
  --primary: #33ff00;
  --primary-foreground: #000000;
  --secondary: #002200;
  --secondary-foreground: #33ff00;
  --muted: #001100;
  --muted-foreground: #008800;
  --accent: #003300;
  --accent-foreground: #33ff00;
  --destructive: #cc0000;
  --destructive-foreground: #000000;
  --border: #004400;
  --input: #004400;
  --ring: #33ff00;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-mono antialiased selection:bg-primary selection:text-primary-foreground;
  }

  /* Retro Terminal Scrollbar */
  ::-webkit-scrollbar {
    width: 14px;
  }
  ::-webkit-scrollbar-track {
    background: #000000;
    border-left: 1px solid #003300;
  }
  ::-webkit-scrollbar-thumb {
    background: #003300;
    border: 1px solid #33ff00;
    box-shadow: inset 0 0 4px rgba(51, 255, 0, 0.5);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #33ff00;
    box-shadow: 0 0 10px #33ff00;
  }
}

/* CRT Scanline Effect */
.scanline {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.2)
  );
  background-size: 100% 4px;
  position: fixed;
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  opacity: 0.3;
}

/* Text Glow */
.glow-text {
  text-shadow: 0 0 5px rgba(51, 255, 0, 0.7);
}