@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans: system-ui, -apple-system, sans-serif;
  --color-background: #0A0A0A;
  --color-foreground: #f5f5f5;
  --color-card: #2a2a2a;
  --color-card-foreground: #f5f5f5;
  --color-popover: #2a2a2a;
  --color-popover-foreground: #f5f5f5;
  --color-primary: #0069FE;
  --color-primary-foreground: #ffffff;
  --color-secondary: #333333;
  --color-secondary-foreground: #f5f5f5;
  --color-muted: #333333;
  --color-muted-foreground: #999999;
  --color-accent: #333333;
  --color-accent-foreground: #f5f5f5;
  --color-destructive: #FD486B;
  --color-destructive-foreground: #ffffff;
  --color-border: #3a3a3a;
  --color-input: #3a3a3a;
  --color-ring: #0069FE;
  --color-chart-1: #0069FE;
  --color-chart-2: #FD486B;
  --color-chart-3: #F59E0B;
  --color-chart-4: #8B5CF6;
  --color-chart-5: #10B981;
  --color-sidebar: #1c1c1c;
  --color-sidebar-foreground: #f5f5f5;
  --color-sidebar-primary: #0069FE;
  --color-sidebar-primary-foreground: #ffffff;
  --color-sidebar-accent: #282828;
  --color-sidebar-accent-foreground: #f5f5f5;
  --color-sidebar-border: #3a3a3a;
  --color-sidebar-ring: #0069FE;
  --radius: 0.75rem;
}

html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

body {
  background-color: var(--color-background);
  background-image: radial-gradient(circle, #1f1f1f 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  color: var(--color-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

::selection {
  background-color: rgba(0, 105, 254, 0.25);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);
}

.bg-gradient-brand {
  background-image: linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);
}

.glow-border {
  box-shadow: 0 0 0 1px rgba(0, 105, 254, 0.1),
              0 0 20px -5px rgba(0, 105, 254, 0.15);
}

.animated-border {
  position: relative;
  overflow: hidden;
}
.animated-border::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    #0166FF,
    #009AFE,
    #4AEEFF,
    #0166FF
  );
  animation: border-spin 3s linear infinite;
}
.animated-border > * {
  position: relative;
  z-index: 1;
}

.animated-border-slow::before {
  animation-duration: 5s;
}

.input-glow:focus {
  border-color: rgba(0, 105, 254, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 105, 254, 0.15),
              0 0 20px -5px rgba(0, 105, 254, 0.25),
              0 0 4px -1px rgba(74, 238, 255, 0.1);
}

@keyframes border-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}