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

@layer base {
  :root {
    color-scheme: light;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  /* Motion is a courtesy, never a requirement. */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    @apply bg-white text-ink antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    @apply bg-primary text-white;
  }

  :focus-visible {
    outline: 2px solid theme(colors.primary.DEFAULT);
    outline-offset: 2px;
    border-radius: theme(borderRadius.md);
  }

  details > summary {
    list-style-type: none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  /* Buttons — landing page Button.tsx variants */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full font-medium tracking-tight transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 disabled:pointer-events-none;
  }

  .btn-primary {
    @apply btn bg-primary text-white shadow-soft hover:bg-primary-dark hover:shadow-glow;
  }

  .btn-ghost {
    @apply btn border border-line bg-white text-ink hover:border-ink/20 hover:bg-surface;
  }

  .btn-white {
    @apply btn bg-white text-primary shadow-soft hover:bg-tint;
  }

  .btn-outline-white {
    @apply btn border border-white/30 text-white hover:bg-white/10;
  }

  .btn-danger {
    @apply btn border border-red-200 bg-white text-red-600 hover:bg-red-50;
  }

  .btn-sm { @apply h-9 px-4 text-sm; }
  .btn-md { @apply h-11 px-5 text-[15px]; }
  .btn-lg { @apply h-[3.25rem] px-7 text-base; }

  /* Approve / reject / check-in are pressed on a phone mid-service, and time
     slots are the guest's primary tap target. On a touch screen they grow to a
     comfortable target; on a mouse they stay compact. */
  @media (pointer: coarse) {
    .btn-sm { @apply h-11 px-5; }
    .slot-chip { @apply h-11 min-w-[4.25rem]; }
  }

  /* Cards */
  .card {
    @apply rounded-2xl border border-line bg-white;
  }

  .card-panel {
    @apply rounded-3xl border border-line bg-white shadow-panel;
  }

  /* Kicker / eyebrow label with the diamond brand dot */
  .kicker {
    @apply inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary;
  }

  .kicker-dot {
    @apply inline-block h-1.5 w-1.5 rotate-45 rounded-[2px] bg-primary;
  }

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

  .badge-dot {
    @apply inline-block h-1.5 w-1.5 rounded-full bg-current;
  }

  .badge-pending    { @apply badge bg-amber-50 text-amber-600; }
  .badge-approved   { @apply badge bg-emerald-50 text-emerald-600; }
  .badge-checked_in { @apply badge bg-blue-50 text-blue-600; }
  .badge-completed  { @apply badge bg-emerald-50 text-emerald-700; }
  .badge-rejected   { @apply badge bg-red-50 text-red-600; }
  .badge-canceled   { @apply badge bg-surface-2 text-muted; }
  .badge-no_show    { @apply badge bg-red-50 text-red-600; }

  /* Time-slot chips (places reservation card) */
  .slot-chip {
    @apply inline-flex h-9 min-w-[3.75rem] cursor-pointer items-center justify-center rounded-full border border-line bg-white px-3 text-sm font-medium tabular-nums text-ink transition-colors duration-200 hover:border-ink/30;
  }

  .slot-chip-selected {
    @apply border-primary bg-primary text-white hover:border-primary;
  }

  .slot-chip-skeleton {
    @apply inline-flex h-9 w-[3.75rem] animate-pulse rounded-full bg-surface-2;
  }

  /* Form inputs */
  .input {
    @apply block w-full rounded-xl border-line bg-white text-[15px] text-ink shadow-none placeholder:text-muted/70 focus:border-primary focus:ring-primary;
  }

  .label {
    @apply block text-sm font-medium text-ink mb-1.5;
  }

  /* Uppercase micro label */
  .microlabel {
    @apply text-xs font-semibold uppercase tracking-widest text-muted;
  }
}

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

.flash--notice {
  @apply text-emerald-700 bg-emerald-50 border border-emerald-100;
}

.flash--alert {
  @apply text-red-700 bg-red-50 border border-red-100;
}