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

:root {
  /* Font variables - will be overridden by Next.js Font */
  --font-orbitron: "Orbitron", sans-serif;
  --font-rajdhani: "Rajdhani", sans-serif;

  /* Dark cyan theme (default) */
  --background: #001d2e;
  --foreground: #ffffff;
  --card: rgba(0, 29, 46, 0.6);
  --card-hover: rgba(0, 29, 46, 0.8);
  --card-column: rgba(0, 29, 46, 0.8);
  --border: rgba(29, 254, 228, 0.3);
  --input: rgba(0, 29, 46, 0.6);
  --primary: #1dfee4;
  --primary-foreground: #001d2e;
  --muted: #9ca3af;
  --muted-foreground: #9ca3af;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --accent: #1dfee4;
  --destructive: #ef4444;
  --success: #10b981;
  --purple: #8b5cf6;
  --yellow: #eab308;
  --green: #10b981;
  --blue: #3b82f6;
  --pixel-gold: #1dfee4;
  --accent-color: #1dfee4;
}

.dark {
  /* Dark gold theme (original) */
  --background: #000000;
  --foreground: #ffffff;
  --card: rgba(0, 0, 0, 0.6);
  --card-hover: rgba(0, 0, 0, 0.8);
  --card-column: rgba(0, 0, 0, 0.8);
  --border: rgba(218, 165, 32, 0.3);
  --input: rgba(0, 0, 0, 0.6);
  --primary: #06b6d4;
  --primary-foreground: #ffffff;
  --muted: #9ca3af;
  --muted-foreground: #9ca3af;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --accent: #ff8c00;
  --destructive: #ef4444;
  --success: #10b981;
  --purple: #8b5cf6;
  --yellow: #eab308;
  --green: #10b981;
  --blue: #3b82f6;
  --pixel-gold: #daa520;
  --accent-color: #daa520;
}

.dark-cyan {
  /* Dark cyan theme (new) */
  --background: #001d2e;
  --foreground: #ffffff;
  --card: rgba(0, 29, 46, 0.6);
  --card-hover: rgba(0, 29, 46, 0.8);
  --card-column: rgba(0, 29, 46, 0.8);
  --border: rgba(29, 254, 228, 0.3);
  --input: rgba(0, 29, 46, 0.6);
  --primary: #1dfee4;
  --primary-foreground: #001d2e;
  --muted: #9ca3af;
  --muted-foreground: #9ca3af;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --accent: #1dfee4;
  --destructive: #ef4444;
  --success: #10b981;
  --purple: #8b5cf6;
  --yellow: #eab308;
  --green: #10b981;
  --blue: #3b82f6;
  --pixel-gold: #1dfee4;
  --accent-color: #1dfee4;
}

@layer base {
  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;
  }
}

@layer utilities {
  .pixel-border {
    border: 2px solid;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }

  .text-pixel {
    font-family: "Courier New", monospace;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
  }

  .title-animated {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .animate-shimmer {
    animation: shimmer 2s infinite;
  }

  /* Button hover states using CSS variables */
  .btn-primary {
    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    background-color: color-mix(in srgb, var(--background) 60%, transparent);
    color: var(--foreground);
  }
  .btn-primary:hover:not(:disabled) {
    border-color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
  }

  .btn-secondary {
    border-color: rgba(107, 114, 128, 0.5);
    background-color: rgba(31, 41, 55, 0.2);
    color: var(--gray-400);
  }
  .btn-secondary:hover:not(:disabled) {
    border-color: var(--gray-500);
    background-color: rgba(31, 41, 55, 0.3);
  }

  .btn-success {
    border-color: rgba(16, 185, 129, 0.5);
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--success);
  }
  .btn-success:hover:not(:disabled) {
    background-color: rgba(16, 185, 129, 0.3);
  }

  .btn-danger {
    border-color: rgba(239, 68, 68, 0.5);
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--destructive);
  }
  .btn-danger:hover:not(:disabled) {
    background-color: rgba(239, 68, 68, 0.3);
  }

  .btn-ghost {
    border-color: transparent;
    background-color: transparent;
    color: var(--foreground);
  }
  .btn-ghost:hover:not(:disabled) {
    color: var(--accent-color);
  }
}