@import "tailwindcss";

@theme {
  --color-canvas: #f7f4ef;
  --color-surface: #ffffff;
  --color-primary: #4a2c2a;
  --color-primary-dark: #36201e;
  --color-accent: #d4a373;
  --color-ink: #2b2b2b;
  --font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@layer components {
  .choice-grid {
    @apply mb-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5;
  }

  .choice-card {
    @apply relative isolate flex h-72 min-w-0 cursor-pointer flex-col items-stretch overflow-hidden rounded-2xl border-[3px] border-transparent bg-surface shadow-[0_4px_15px_rgba(0,0,0,0.05)] transition duration-250 hover:-translate-y-[5px] hover:shadow-[0_8px_25px_rgba(0,0,0,0.1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-pressed:border-accent;
  }

  .choice-card:hover img {
    @apply scale-105;
  }

  .card-overlay {
    @apply relative z-10 mt-auto flex w-full flex-col bg-gradient-to-t from-black/85 via-black/55 to-transparent px-5 pb-5 pt-16 text-left text-white;
  }

  .choice-image {
    @apply absolute inset-0 h-full w-full object-cover transition duration-300;
  }

  .choice-title {
    @apply text-xl font-semibold;
  }

  .choice-description {
    @apply mt-2 text-sm leading-6 text-white/85;
  }

  .choice-grid-status {
    @apply col-span-full flex min-h-72 items-center justify-center rounded-2xl border border-dashed border-accent bg-white/50 px-6 text-sm font-semibold text-primary;
  }

  .primary-action {
    @apply rounded-full bg-primary px-12 py-4 font-semibold text-white transition enabled:cursor-pointer enabled:hover:scale-[1.02] enabled:hover:bg-primary-dark disabled:cursor-not-allowed disabled:opacity-50;
  }

  .receipt-row {
    @apply flex items-baseline justify-between gap-4 py-2;
  }

  .receipt-row dd {
    @apply min-w-0 break-words text-right;
  }
}