@import 'tailwindcss';
@import '@nuxt/ui';

@theme static {
  --font-sans: 'Helvetica', sans-serif;
  --font-display: 'Helvetica', 'sans-serif';
}

:root {
  --ui-light-primary: #ffcc15;
  --ui-light-secondary: #000;
  --ui-dark-primary: #ffcc15;
  --ui-dark-secondary: #000;
  --ui-primary: var(--ui-light-primary);
  --ui-secondary: var(--ui-light-secondary);
  --ui-text: #000;
}
.dark {
  --ui-primary: var(--ui-dark-primary);
  --ui-secondary: var(--ui-dark-secondary);
  --ui-text: #fff;
}

/* =========================
   GLOBAL UTILITIES
========================= */
@layer utilities {
  .soft-shadow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  }

  .glow-brand {
    box-shadow: 0 0 30px rgba(255, 204, 21, 0.45);
  }
}

/* =========================
   FLOATING ANIMATION
========================= */
@keyframes floatSlow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

.float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}
@layer utilities {
  .bg-glow-yellow {
    background: radial-gradient(circle at center, rgba(255, 204, 21, 0.35), transparent 65%);
  }

  .bg-glow-soft {
    background: radial-gradient(circle at center, rgba(255, 204, 21, 0.18), transparent 70%);
  }
}
@layer utilities {
  .glow-primary {
    box-shadow: 0 0 25px rgba(255, 204, 21, 0.45);
  }

  .hover-glow:hover {
    box-shadow: 0 0 35px rgba(255, 204, 21, 0.55);
  }

  .animate-float {
    animation: floatSlow 7s ease-in-out infinite;
  }
  .hover-soft {
    transition: all 0.25s ease;
  }

  .hover-soft:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }
}