/* 
 * [Action]: Custom CSS Styling for 9pon Digital Business Card (KK Architect)
 * [Added]: Warm Cream Design DNA, Organic Shapes, Floating Card Effects, Pulse Animations, and Mobile Quick Bar
 */

:root {
  --bg-warm-cream: #F8F0DF;
  --surface-cream: #FFF8EA;
  --primary-emerald: #14543F;
  --secondary-forest: #285845;
  --accent-tangerine: #F59A32;
  --border-beige: #DDD4C2;
  --text-muted-green: #557064;
  --text-dark-emerald: #12342A;
}

body {
  background-color: var(--bg-warm-cream);
  color: var(--text-dark-emerald);
  font-family: 'Prompt', 'Outfit', sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Background Ambient Canvas */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Card Container & Glass-free Warm Glow */
.warm-card {
  background: var(--surface-cream);
  border: 1px solid var(--border-beige);
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px -5px rgba(20, 84, 63, 0.06), 0 4px 12px -2px rgba(20, 84, 63, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.warm-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -4px rgba(20, 84, 63, 0.12), 0 6px 16px -2px rgba(20, 84, 63, 0.05);
  border-color: rgba(245, 154, 50, 0.4);
}

/* Rounded Pill Buttons */
.btn-emerald {
  background-color: var(--primary-emerald);
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-emerald:hover {
  background-color: var(--secondary-forest);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(20, 84, 63, 0.3);
}

.btn-tangerine {
  background-color: var(--accent-tangerine);
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-tangerine:hover {
  background-color: #E2861F;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(245, 154, 50, 0.35);
}

.btn-outline-warm {
  background: #FFFFFF;
  color: var(--primary-emerald);
  border: 1.5px solid var(--border-beige);
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-outline-warm:hover {
  background: #FDFBF7;
  border-color: var(--primary-emerald);
  transform: translateY(-2px);
}

/* Avatar Border & Glow */
.avatar-ring {
  box-shadow: 0 0 0 4px #FFF8EA, 0 0 0 7px var(--primary-emerald);
}

/* Online Pulse Indicator */
.online-pulse {
  position: relative;
}

.online-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: #10B981;
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* Interactive Sliders */
input[type="range"] {
  accent-color: var(--primary-emerald);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-warm-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--border-beige);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted-green);
}