@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── CSS custom properties ─────────────────────────────────────────────────── */
:root {
  --color-brand:      #2b5916;
  --color-brand-dark: #1e3f10;
  --color-gold:       #c4952a;
  --color-gold-light: #f4da99;
  --safe-bottom:      env(safe-area-inset-bottom, 0px);
  --safe-top:         env(safe-area-inset-top, 0px);
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Prevents iOS rubber-band on the outer scroll */
    overscroll-behavior: none;
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  /* Make all tap highlights match brand */
  * {
    -webkit-tap-highlight-color: rgb(43 89 22 / 0.12);
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
  }
}

/* ── Component layer ────────────────────────────────────────────────────────── */
@layer components {
  /* Primary button */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2
           rounded-xl px-5 py-3
           bg-brand-700 text-white font-semibold text-sm
           shadow-bid-btn
           hover:bg-brand-800
           active:scale-[0.97]
           transition-all duration-150
           disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none;
  }

  /* Ghost / secondary button */
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2
           rounded-xl px-5 py-3
           border border-brand-200 bg-white text-brand-700 font-semibold text-sm
           hover:bg-brand-50
           active:scale-[0.97]
           transition-all duration-150
           disabled:opacity-40 disabled:cursor-not-allowed;
  }

  /* Gold accent button */
  .btn-gold {
    @apply inline-flex items-center justify-center gap-2
           rounded-xl px-5 py-3
           bg-gold-500 text-white font-semibold text-sm
           hover:bg-gold-600
           active:scale-[0.97]
           transition-all duration-150
           disabled:opacity-40 disabled:cursor-not-allowed;
  }

  /* Card surface */
  .card {
    @apply bg-white rounded-2xl shadow-card border border-gray-100;
  }

  /* Form input */
  .field {
    @apply w-full rounded-xl border border-gray-200 bg-white
           px-4 py-3 text-sm text-gray-900
           placeholder:text-gray-400
           focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20
           transition-colors;
  }

  /* Subtle badge */
  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
  }

  /* Section header inside a page */
  .section-title {
    @apply text-xs uppercase tracking-widest font-semibold text-gray-400;
  }
}

/* ── Bottom nav safe area ───────────────────────────────────────────────────── */
.pb-safe {
  padding-bottom: calc(4rem + var(--safe-bottom));
}

.bottom-nav {
  padding-bottom: var(--safe-bottom);
}