@import "tailwindcss";

:root {
  --background: #000000;
  --foreground: #ffffff;
  --neon-white: #ffffff;
  --white-shade-1: #ffffff;
  --white-shade-2: #e5e5e5;
  --white-shade-3: #cccccc;
  --dark-bg: #0a0a0a;
  --dark-surface: #111111;
  --dark-border: #1a1a1a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

/* Tech grid background pattern */
.tech-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Neon glow effects */
.neon-glow {
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4);
}

.neon-border {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.neon-border-glow {
  box-shadow: 
    0 0 15px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(255, 255, 255, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.05);
}

/* Scanline effect */
.scanlines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1;
}

/* Animation delays */
.delay-1000 {
  animation-delay: 1s;
}