/* static/css/components.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  :root {
    --lm-gold: #c5a052; /* adjust to your brand token if different */
  }

  .lm-section { @apply max-w-6xl mx-auto px-6 py-10; }

  .lm-section-header { @apply flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8; }

  .lm-title { @apply text-3xl font-serif text-black; }

  .lm-card { @apply rounded-2xl border border-black/10 bg-white p-6 text-black/80 shadow-sm; }

  .lm-card-muted { @apply rounded-2xl border border-black/10 bg-white p-6 text-black/70 shadow-sm; }

  .lm-btn { @apply px-4 py-2 rounded-xl transition; }

  .lm-btn-gold { @apply lm-btn font-medium text-black;
    background: var(--lm-gold);
  }
  .lm-btn-gold:hover { filter: brightness(0.95); }
  .lm-btn-gold:active { filter: brightness(0.90); }

    .btn-gold-primary {
  @apply px-5 py-2.5 rounded-full bg-[var(--lm-gold-dark)] text-black font-semibold hover:opacity-90 transition shadow-sm;
}

  .btn-gold-primary:hover { @apply opacity-90; }

  .lm-btn-outline { @apply lm-btn border border-black/20 text-black hover:bg-black/5; }

  .lm-link-button { @apply lm-btn-outline; } /* for <a> styled as button */

  .lm-select {
    @apply px-3 py-2 rounded-xl bg-white text-black border border-black/20 shadow-sm focus:outline-none;
    outline: none;
  }
  .lm-select:focus { box-shadow: 0 0 0 2px var(--lm-gold); }

  .lm-badge {
    @apply text-xs px-2 py-1 rounded-full border;
    background: color-mix(in oklab, var(--lm-gold) 18%, white);
    border-color: color-mix(in oklab, var(--lm-gold) 45%, black);
    color: black;
  }

  .lm-subtle { @apply text-sm text-black/60; }
  .lm-amount { color: var(--lm-gold); @apply font-semibold; }
}
.lm-navbtn {
  @apply px-4 py-2 rounded-xl border border-black/20 text-black hover:bg-black/5 transition;
}

.lm-menulink {
  @apply block w-full text-left px-4 py-2 rounded-lg text-black/80 hover:bg-[var(--lm-gold)] hover:text-black transition;
}