@import "tailwindcss";
@config "../../tailwind.config.ts";

:root {
  /* Terminal Neon Color Palette - RGB values for alpha support */
  --color-primary: 0 217 255;           /* Electric Cyan #00D9FF */
  --color-primary-glow: 0 240 255;      /* Brighter cyan for glows */
  --color-accent: 255 0 110;            /* Neon Magenta #FF006E */
  --color-secondary: 204 255 0;         /* Electric Lime #CCFF00 */

  /* Status Colors */
  --color-success: 0 255 159;           /* #00FF9F */
  --color-warning: 255 184 0;           /* #FFB800 */
  --color-error: 255 71 87;             /* #FF4757 */
  --color-info: 0 191 255;              /* #00BFFF */

  /* Dark Theme Base */
  --color-dark-950: 0 0 0;              /* Pure black */
  --color-dark-900: 10 10 15;           /* Near black */
  --color-dark-800: 20 20 30;           /* Dark background */
  --color-dark-700: 30 35 45;           /* Slightly lighter */
  --color-dark-600: 45 50 65;           /* Mid-dark */
  --color-dark-500: 60 65 80;           /* Mid tone */
  --color-dark-400: 80 85 100;          /* Light-mid */

  /* Text Colors */
  --color-text-primary: 240 245 255;    /* Near white */
  --color-text-secondary: 160 170 190;  /* Muted light */
  --color-text-tertiary: 100 110 130;   /* Very muted */
  --color-text-muted: 70 75 90;         /* Subtle text */

  /* Background Colors */
  --color-background: var(--color-dark-950);
  --color-background-secondary: var(--color-dark-900);
  --color-background-tertiary: var(--color-dark-800);

  /* Spacing Scale */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  --font-size-7xl: 4.5rem;     /* 72px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Border Radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Shadows - Neon Glow Effects */
  --shadow-neon-primary: 0 0 5px rgb(var(--color-primary)), 0 0 20px rgb(var(--color-primary));
  --shadow-neon-primary-sm: 0 0 3px rgb(var(--color-primary)), 0 0 10px rgb(var(--color-primary));
  --shadow-neon-primary-lg: 0 0 10px rgb(var(--color-primary)), 0 0 40px rgb(var(--color-primary));
  --shadow-neon-primary-xl: 0 0 20px rgb(var(--color-primary)), 0 0 60px rgb(var(--color-primary)), 0 0 100px rgb(var(--color-primary));

  --shadow-neon-accent: 0 0 5px rgb(var(--color-accent)), 0 0 20px rgb(var(--color-accent));
  --shadow-neon-accent-lg: 0 0 10px rgb(var(--color-accent)), 0 0 40px rgb(var(--color-accent));

  --shadow-neon-secondary: 0 0 5px rgb(var(--color-secondary)), 0 0 20px rgb(var(--color-secondary));

  /* Standard Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index Scale */
  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-fixed: 1200;
  --z-index-modal-backdrop: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-tooltip: 1600;

  /* Terminal Specific */
  --terminal-border: 2px solid rgb(var(--color-primary) / 0.3);
  --terminal-bg: rgb(var(--color-dark-800) / 0.8);
  --terminal-glow: 0 0 20px rgb(var(--color-primary) / 0.2);

  /* Grid Background */
  --grid-size: 40px;
  --grid-color: rgb(var(--color-primary) / 0.1);
}

/* Base Styles */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text-primary));
  font-family: var(--font-sans);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

/* Remove default button styles */
button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Remove default link styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Selection Colors */
::-moz-selection {
  background-color: rgb(var(--color-primary) / 0.3);
  color: rgb(var(--color-text-primary));
}
::selection {
  background-color: rgb(var(--color-primary) / 0.3);
  color: rgb(var(--color-text-primary));
}

::-moz-selection {
  background-color: rgb(var(--color-primary) / 0.3);
  color: rgb(var(--color-text-primary));
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-dark-900));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-primary) / 0.3);
  border-radius: var(--radius-md);
  border: 2px solid rgb(var(--color-dark-900));
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-primary) / 0.5);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-primary) / 0.3) rgb(var(--color-dark-900));
}

/* Grid Background Pattern */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* Terminal Window */
.terminal-box {
  background: var(--terminal-bg);
  border: var(--terminal-border);
  box-shadow: var(--terminal-glow);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* Neon Text */
.text-neon {
  text-shadow: var(--shadow-neon-primary);
  color: rgb(var(--color-primary));
}

.text-neon-accent {
  text-shadow: var(--shadow-neon-accent);
  color: rgb(var(--color-accent));
}

/* Utility Classes */
.container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 5vw, var(--spacing-md));
  padding-right: clamp(1rem, 5vw, var(--spacing-md));
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Loading Animation */
@-webkit-keyframes pulse-neon {
  0%, 100% {
    opacity: 1;
    -webkit-filter: drop-shadow(0 0 8px rgb(var(--color-primary)));
            filter: drop-shadow(0 0 8px rgb(var(--color-primary)));
  }
  50% {
    opacity: 0.5;
    -webkit-filter: drop-shadow(0 0 4px rgb(var(--color-primary)));
            filter: drop-shadow(0 0 4px rgb(var(--color-primary)));
  }
}
@keyframes pulse-neon {
  0%, 100% {
    opacity: 1;
    -webkit-filter: drop-shadow(0 0 8px rgb(var(--color-primary)));
            filter: drop-shadow(0 0 8px rgb(var(--color-primary)));
  }
  50% {
    opacity: 0.5;
    -webkit-filter: drop-shadow(0 0 4px rgb(var(--color-primary)));
            filter: drop-shadow(0 0 4px rgb(var(--color-primary)));
  }
}

.animate-pulse-neon {
  -webkit-animation: pulse-neon 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
          animation: pulse-neon 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scanline Effect */
@-webkit-keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

.scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(transparent, rgb(var(--color-primary) / 0.3), transparent);
  -webkit-animation: scanline 6s linear infinite;
          animation: scanline 6s linear infinite;
  pointer-events: none;
  z-index: 1;  /* Lower z-index */
  opacity: 0.5;  /* Make it more subtle */
}

/* Focus Visible */
:focus-visible {
  outline: 2px solid rgb(var(--color-primary));
  outline-offset: 2px;
}

/* Disabled State */
:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}