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

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

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

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

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

  :focus-visible {
    outline: 2px solid #d13128;
    outline-offset: 2px;
    border-radius: 4px;
  }

  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; }

  /* 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; }

  /* 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;
}