@import "tailwindcss";
@import "./pagy.css";

@theme {
  /* GolfChad Dark Theme Colors */
  --color-gc-bg: #121212;
  --color-gc-surface: #1E1E1E;
  --color-gc-border: #2C2C2C;
  --color-gc-text: #EDEDED;
  --color-gc-muted: #B3B3B3;
  --color-gc-teal: #3CC9C9;
  --color-gc-coral: #FF6A4D;
  --color-gc-green: #32C76D;
  --color-gc-amber: #FFB84D;
  --color-gc-silver: #C0C0C0;
  --color-gc-bronze: #CD7F32;

  /* Box Shadow */
  --shadow-glow: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* Border Radius */
  --radius-2xl: 16px;
}

/* Custom gradient for hero sections */
.hero-bg {
  background:
    radial-gradient(1200px 50% at 90% -10%, color-mix(in oklab, #FFB84D 12%, transparent), transparent 60%),
    radial-gradient(800px 40% at 10% -10%, color-mix(in oklab, #3CC9C9 14%, transparent), transparent 60%);
}

/* Auth form components */
@layer components {
  .auth-input {
    @apply w-full rounded-2xl border border-white/10 bg-[#121212]/80 px-4 py-3 text-base text-white placeholder:text-white/40 transition focus:border-[#3CC9C9]/60 focus:outline-none focus:ring-2 focus:ring-[#3CC9C9]/25;
  }

  .auth-label {
    @apply text-sm font-semibold text-white/80;
  }
}