@import "tailwindcss";
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
}
:root {
color-scheme: dark;
--background: #0f172a;
--foreground: #e2e8f0;
--primary: #22d3ee;
--primary-foreground: #0f172a;
--secondary: rgba(15, 23, 42, 0.5);
--secondary-foreground: #e2e8f0;
--muted: rgba(15, 23, 42, 0.5);
--muted-foreground: #94a3b8;
--accent: rgba(34, 211, 238, 0.1);
--accent-foreground: #e2e8f0;
--destructive: #ef4444;
--destructive-foreground: #e2e8f0;
--card: rgba(15, 23, 42, 0.8);
--card-foreground: #e2e8f0;
--popover: #1e293b;
--popover-foreground: #e2e8f0;
--border: rgba(34, 211, 238, 0.2);
--input: rgba(34, 211, 238, 0.2);
--ring: #22d3ee;
--neon-cyan: #22d3ee;
--neon-magenta: #f472b6;
--neon-green: #4ade80;
--neon-amber: #fbbf24;
--grid-color: rgba(34, 211, 238, 0.05);
--bg-slate: var(--background);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
body {
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 40px 40px;
}
.glow-cyan {
text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}
.glow-magenta {
text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
}
.glow-green {
text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}
.glow-amber {
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.data-border {
border: 1px solid rgba(34, 211, 238, 0.2);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.data-header {
background: rgba(34, 211, 238, 0.1);
border-bottom: 1px solid rgba(34, 211, 238, 0.3);
}