@import "tailwindcss";

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

@layer base {
  :root {
    --brand-tangerine: #FF8C32;
    --brand-tangerine-hover: #E6761D;
    --brand-tangerine-glow: rgba(255, 140, 50, 0.4);
    --brand-sky: #00D7FF;
    --brand-sky-hover: #00BCE0;
    --brand-sky-glow: rgba(0, 215, 255, 0.35);
  }

  body {
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  }

  .dark body {
    background-color: #0a0c14;
    color: #F1F5F9;
  }

  .light body {
    background-color: #f8fafc;
    color: #0f172a;
  }

  h1, h2, h3, .font-display {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  }
}

/* Immersive UI Glowing effects */
.glow-tangerine {
  box-shadow: 0 0 35px -5px rgba(255, 140, 50, 0.45);
}

.glow-sky {
  box-shadow: 0 0 35px -5px rgba(0, 215, 255, 0.4);
}

.glow-combo {
  box-shadow: -10px -10px 40px -10px rgba(255, 140, 50, 0.3),
               10px 10px 40px -10px rgba(0, 215, 255, 0.3);
}

.text-gradient-brand {
  background: linear-gradient(135deg, #FF8C32 0%, #FFA843 35%, #00D7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-tangerine {
  background: linear-gradient(135deg, #FFFFFF 20%, #FFA256 70%, #FF8C32 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-sky {
  background: linear-gradient(135deg, #FFFFFF 30%, #38E1FF 80%, #00D7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-brand-cta {
  background: linear-gradient(135deg, #FF8C32 0%, #FFA048 40%, #00D7FF 100%);
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-slow-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-spin-slow-reverse {
  animation: spin-slow-reverse 25s linear infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0c14;
}
::-webkit-scrollbar-thumb {
  background: #161b2b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF8C32;
}

