/* FS FIBER TECHNOLOGY - LIGHT & CLEAN DESIGN SYSTEM */

:root {
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-card: #FFFFFF;
  --color-card-hover: #F8FAFC;
  --color-border: #E2E8F0;
  --color-border-hover: rgba(121, 40, 202, 0.35);
  
  /* Brand Gradient Accents */
  --brand-cyan: #00B4D8;
  --brand-blue: #0070F3;
  --brand-purple: #7928CA;
  --brand-magenta: #FF0080;
  --brand-orange: #FF5E3A;
  --brand-amber: #FFAE00;
  --brand-green: #10B981;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background-color: var(--color-bg);
  color: #1E293B;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7928CA;
}

/* Light Frosted Glass Panels */
.glass-panel-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.card-light-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-light-hover:hover {
  background: #FFFFFF;
  border-color: rgba(121, 40, 202, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(121, 40, 202, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.04);
}

/* Brand Text Gradients */
.gradient-text {
  background: linear-gradient(135deg, #0070F3 0%, #7928CA 50%, #FF0080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, #FF0080 0%, #FF5E3A 50%, #FFAE00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-cyan {
  background: linear-gradient(135deg, #0070F3 0%, #00B4D8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ambient Background Glows */
.bg-ambient-glow-light {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Animations */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.04); }
}

@keyframes floatElement {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

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

.animate-float {
  animation: floatElement 5s ease-in-out infinite;
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}

/* Shadows */
.shadow-card-light {
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
}

.shadow-brand-glow {
  box-shadow: 0 10px 25px -5px rgba(121, 40, 202, 0.35);
}

.shadow-neon-cyan {
  box-shadow: 0 10px 25px -5px rgba(0, 180, 216, 0.35);
}

.shadow-neon-magenta {
  box-shadow: 0 10px 25px -5px rgba(255, 0, 128, 0.35);
}