@import "tailwindcss";

:root {
  --foreground-rgb: 226, 232, 240;
  --background-start-rgb: 10, 25, 47;
  --background-end-rgb: 10, 25, 47;

  --background: #050B14;
  --foreground: #E2E8F0;
  
  --zsl-bg: #050B14;
  --zsl-text: #E2E8F0;
  --zsl-primary: #00D4FF;
  --zsl-accent: #FFAA00;
  --zsl-card: #0F172A;
  --zsl-muted: #94A3B8;
}

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

  --color-zsl-bg: var(--zsl-bg);
  --color-zsl-text: var(--zsl-text);
  --color-zsl-primary: var(--zsl-primary);
  --color-zsl-accent: var(--zsl-accent);
  --color-zsl-card: var(--zsl-card);
  --color-zsl-muted: var(--zsl-muted);
  
  --animate-scroll: scroll 40s linear infinite;
  --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-grid-move: grid-move 20s linear infinite;

  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
  @keyframes grid-move {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A192F; 
}
::-webkit-scrollbar-thumb {
  background: #1e293b; 
  border-radius: 4px;
  border: 1px solid #0A192F;
}
::-webkit-scrollbar-thumb:hover {
  background: #00D4FF; 
}

.glass-panel {
  background: rgba(17, 34, 64, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 212, 255, 0.1);
}

.cyber-grid {
  background-image: 
    linear-gradient(to right, rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}

.scanlines {
  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;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.15;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .scanlines {
    display: none;
  }
  
  .animate-pulse,
  .animate-spin,
  .animate-bounce {
    animation: none !important;
  }
}

/* Skip to main content link for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--zsl-primary);
  color: black;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: bold;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Focus visible styles for better keyboard navigation */
:focus-visible {
  outline: 2px solid var(--zsl-primary);
  outline-offset: 2px;
}

/* Better button and link focus states */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--zsl-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
