@import "./theme.css";

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

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

/* ── CSS custom properties ────────────────────────────────── */
:root {
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.dark {
  color-scheme: dark;
  scrollbar-color: #374151 transparent;
}

/* ── Custom scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb {
  background: #374151;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* ── Body ─────────────────────────────────────────────────── */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Mesh grid overlay (pseudo-element) ───────────────────── */
.mesh-overlay {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Animation keyframes ──────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes packetFlow {
  0% {
    top: -12px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 32px;
    opacity: 0;
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
  50% {
    box-shadow: 0 0 22px 5px rgba(99, 102, 241, 0.38);
  }
}

/* ── Animation utilities ──────────────────────────────────── */
.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-slide-left {
  animation: slideInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-slide-right {
  animation: slideInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.animate-packet-flow {
  animation: packetFlow 1.8s ease-in-out infinite;
}

/* ── vc-* semantic utilities ──────────────────────────────── */
@layer utilities {
  /* Page & surface backgrounds */
  .vc-bg-canvas   { @apply bg-background-50; }
  .vc-bg-surface  { @apply bg-background-100; }
  .vc-bg-elevated { @apply bg-background-200; }

  /* Login page gradient — adapts between light and dark via CSS vars */
  .vc-login-bg {
    background-image: linear-gradient(
      135deg,
      rgb(var(--background-100)) 0%,
      rgb(var(--primary-100)) 50%,
      rgb(var(--background-50)) 100%
    );
  }

  /* Text */
  .vc-text        { @apply text-foreground-900; }
  .vc-text-muted  { @apply text-foreground-500; }
  .vc-text-subtle { @apply text-foreground-400; }
  .vc-text-brand  { @apply text-primary-600; }

  /* Borders */
  .vc-border       { @apply border-neutral-200; }
  .vc-border-brand { @apply border-primary-500/60; }

  /* Floating card / node — glass-style that works on both light and dark gradients */
  .vc-node-card {
    background-color: rgb(var(--background-100) / 0.75);
    border: 1px solid rgb(var(--neutral-200) / 0.6);
    backdrop-filter: blur(8px);
  }

  /* Status: success */
  .vc-bg-success-subtle { @apply bg-success-100/50; }
  .vc-border-success    { @apply border-success-300/50; }
  .vc-text-success      { @apply text-success-700; }

  /* Modal overlay */
  .vc-overlay { @apply bg-foreground-950/60 backdrop-blur-sm; }
}

/* ── ReactFlow login overrides ────────────────────────────── */
.rf-login .react-flow__pane {
  cursor: default;
}
.rf-login .react-flow__node {
  cursor: default;
}
.rf-login .react-flow__node-controlPlane {
  cursor: pointer;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-slide-left,
  .animate-slide-right,
  .animate-gradient-shift,
  .animate-pulse-glow,
  .animate-packet-flow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
