@import 'tailwindcss';
@source "./**/*.{ts,tsx}";
@source "../../packages/*/src/**/*.{ts,tsx}";
@source "../../../../packages/*/src/**/*.{ts,tsx}";

@theme {
  --color-brand-primary: var(--brand-primary);
  --color-cyber-green: var(--brand-primary);
  --color-cyber-blue: var(--cyber-blue);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card-bg);
  --color-card-elevated: var(--card-bg-elevated);
  --color-border: var(--card-border);
  --color-muted-foreground: var(--muted);
  --color-muted-more: var(--muted-more);
  --shadow-premium: var(--shadow-premium);
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), monospace;
  @keyframes cyber-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  --animate-cyber-pulse: cyber-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --brand-primary: #008f5a; /* Default Cyber Green (Light) */
  --cyber-green: var(--brand-primary);
  --cyber-blue: #007a8a; /* Darker blue for light mode contrast */
  --card-bg: rgba(0, 0, 0, 0.02);
  --card-bg-elevated: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --muted: rgba(0, 0, 0, 0.5);
  --muted-more: rgba(0, 0, 0, 0.3);
  --border: rgba(0, 0, 0, 0.08);
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.1);
  --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
  --brand-primary: #00ffa3; /* Default Cyber Green (Dark) */
  --cyber-green: var(--brand-primary);
  --cyber-blue: #00e0ff;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-bg-elevated: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.1);
  --muted: rgba(255, 255, 255, 0.6);
  --muted-more: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-border: rgba(255, 255, 255, 0.1);
  --shadow-premium: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  box-shadow: var(--shadow-premium);
}

.glass-card-elevated {
  background: var(--card-bg-elevated);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  box-shadow: var(--shadow-premium);
}

.glow-text {
  text-shadow: 0 0 10px rgba(0, 255, 163, 0.3);
}

.dark .glow-text {
  text-shadow: 0 0 10px rgba(0, 255, 163, 0.5);
}

.cyber-border {
  border-left: 2px solid var(--cyber-green);
}

.bg-grid-white {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-grid-cyber-green {
  background-image:
    linear-gradient(rgba(0, 255, 163, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 163, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Custom Utilities for Dynamic Theme Colors */
.bg-cyber-green {
  background-color: var(--cyber-green);
}
.bg-cyber-green\/5 {
  background-color: color-mix(in srgb, var(--cyber-green) 5%, transparent);
}
.bg-cyber-green\/10 {
  background-color: color-mix(in srgb, var(--cyber-green) 10%, transparent);
}
.bg-cyber-green\/20 {
  background-color: color-mix(in srgb, var(--cyber-green) 20%, transparent);
}
.bg-cyber-green\/60 {
  background-color: color-mix(in srgb, var(--cyber-green) 60%, transparent);
}
.text-cyber-green {
  color: var(--cyber-green);
}
.text-cyber-green\/90 {
  color: color-mix(in srgb, var(--cyber-green) 90%, transparent);
}
.border-cyber-green {
  border-color: var(--cyber-green);
}
.border-cyber-green\/10 {
  border-color: color-mix(in srgb, var(--cyber-green) 10%, transparent);
}
.border-cyber-green\/20 {
  border-color: color-mix(in srgb, var(--cyber-green) 20%, transparent);
}
.border-cyber-green\/30 {
  border-color: color-mix(in srgb, var(--cyber-green) 30%, transparent);
}
.border-cyber-green\/50 {
  border-color: color-mix(in srgb, var(--cyber-green) 50%, transparent);
}
.bg-cyber-green\/50 {
  background-color: color-mix(in srgb, var(--cyber-green) 50%, transparent);
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-cyber-green {
  border-left-color: var(--cyber-green);
}
.border-l-cyber-blue {
  border-left-color: var(--cyber-blue);
}
.group:hover .group-hover\:text-cyber-green {
  color: var(--cyber-green);
}
.hover\:text-cyber-green:hover {
  color: var(--cyber-green);
}
.hover\:bg-cyber-green\/5:hover {
  background-color: color-mix(in srgb, var(--cyber-green) 5%, transparent);
}
.hover\:border-cyber-green\/50:hover {
  border-color: color-mix(in srgb, var(--cyber-green) 50%, transparent);
}

.bg-cyber-blue {
  background-color: var(--cyber-blue);
}
.bg-cyber-blue\/5 {
  background-color: color-mix(in srgb, var(--cyber-blue) 5%, transparent);
}
.bg-cyber-blue\/10 {
  background-color: color-mix(in srgb, var(--cyber-blue) 10%, transparent);
}
.bg-cyber-blue\/20 {
  background-color: color-mix(in srgb, var(--cyber-blue) 20%, transparent);
}
.bg-cyber-blue\/\[0\.02\] {
  background-color: color-mix(in srgb, var(--cyber-blue) 2%, transparent);
}
.text-cyber-blue {
  color: var(--cyber-blue);
}
.border-cyber-blue {
  border-color: var(--cyber-blue);
}
.border-cyber-blue\/10 {
  border-color: color-mix(in srgb, var(--cyber-blue) 10%, transparent);
}
.border-cyber-blue\/30 {
  border-color: color-mix(in srgb, var(--cyber-blue) 30%, transparent);
}
.border-cyber-blue\/50 {
  border-color: color-mix(in srgb, var(--cyber-blue) 50%, transparent);
}
.bg-cyber-blue\/50 {
  background-color: color-mix(in srgb, var(--cyber-blue) 50%, transparent);
}
.border-cyber-blue\/40 {
  border-color: color-mix(in srgb, var(--cyber-blue) 40%, transparent);
}
.hover\:bg-cyber-blue\/5:hover {
  background-color: color-mix(in srgb, var(--cyber-blue) 5%, transparent);
}
.hover\:border-cyber-blue\/40:hover {
  border-color: color-mix(in srgb, var(--cyber-blue) 40%, transparent);
}
.hover\:border-cyber-blue\/50:hover {
  border-color: color-mix(in srgb, var(--cyber-blue) 50%, transparent);
}

.bg-purple-400 {
  background-color: #c084fc;
}
.bg-purple-400\/10 {
  background-color: rgba(192, 132, 252, 0.1);
}
.text-purple-400 {
  color: #c084fc;
}
.border-purple-400 {
  border-color: #c084fc;
}
.focus\:border-purple-400:focus {
  border-color: #c084fc;
}

.bg-red-500 {
  background-color: #ef4444;
}
.bg-red-500\/10 {
  background-color: rgba(239, 68, 68, 0.1);
}
.bg-red-500\/20 {
  background-color: rgba(239, 68, 68, 0.2);
}
.bg-red-500\/\[0\.02\] {
  background-color: rgba(239, 68, 68, 0.02);
}
.text-red-500 {
  color: #ef4444;
}
.border-red-500 {
  border-color: #ef4444;
}
.border-red-500\/10 {
  border-color: rgba(239, 68, 68, 0.1);
}
.border-red-500\/20 {
  border-color: rgba(239, 68, 68, 0.2);
}
.border-red-500\/30 {
  border-color: rgba(239, 68, 68, 0.3);
}
.hover\:bg-red-500\/20:hover {
  background-color: rgba(239, 68, 68, 0.2);
}
.hover\:text-red-500:hover {
  color: #ef4444;
}
.hover\:border-red-500\/30:hover {
  border-color: rgba(239, 68, 68, 0.3);
}

.bg-orange-400 {
  background-color: #fb923c;
}
.bg-orange-400\/10 {
  background-color: rgba(251, 146, 60, 0.1);
}
.text-orange-400 {
  color: #fb923c;
}
.border-orange-400 {
  border-color: #fb923c;
}
.border-orange-400\/30 {
  border-color: rgba(251, 146, 60, 0.3);
}

.bg-yellow-400 {
  background-color: #facc15;
}
.text-yellow-400 {
  color: #facc15;
}
.border-yellow-400 {
  border-color: #facc15;
}

/* Peer-checked states for the toggle */
.peer:checked ~ .peer-checked\:bg-cyber-green\/40 {
  background-color: color-mix(in srgb, var(--cyber-green) 40%, transparent);
}

.peer:checked ~ .peer-checked\:after\:bg-cyber-green::after {
  background-color: var(--cyber-green);
}

.peer:checked ~ .peer-checked\:after\:toggle-move::after {
  transform: translateX(1.25rem); /* Exactly 20px */
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-4px);
  }
}

.animate-shake {
  animation: shake 0.2s ease-in-out 0s 2;
}

/* Custom Cyber Toasts */
.cyber-toast {
  background: var(--card-bg-elevated) !important;
  border: 1px solid var(--card-border) !important;
  backdrop-filter: blur(12px) !important;
  color: var(--foreground) !important;
  font-family: var(--font-mono) !important;
  border-radius: 2px !important;
  box-shadow: var(--shadow-premium) !important;
  padding: 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.bg-muted-more {
  background-color: var(--muted-more);
}

.text-muted-more {
  color: var(--muted-more);
}

.bg-input {
  background-color: var(--input-bg);
}

.border-input {
  border-color: var(--input-border);
}

.dark .cyber-toast {
  background: rgba(5, 5, 5, 0.9) !important;
  border: 1px solid rgba(0, 224, 255, 0.3) !important;
  box-shadow:
    0 0 30px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(0, 224, 255, 0.1) !important;
}

.cyber-toast-success {
  border-left: 4px solid var(--cyber-green) !important;
}

.cyber-toast-error {
  border-left: 4px solid #ef4444 !important;
}

.cyber-toast-description {
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

/* Hide React Flow Attribution */
.react-flow__attribution {
  display: none !important;
}
