@import url("https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.min.css");

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

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    @apply bg-paper text-ink font-sans antialiased;
    font-feature-settings: "ss01";
  }
  h1, h2, h3 {
    @apply font-display;
    font-optical-sizing: auto;
  }
  ::selection {
    background: #f0cdc7;
    color: #7f1212;
  }
  :focus-visible {
    outline: 2px solid #b21d1d;
    outline-offset: 2px;
    border-radius: 3px;
  }
}

@layer components {
  /* — page scaffolding — */
  .page { @apply max-w-5xl mx-auto px-5 sm:px-6 pt-10 pb-20 animate-rise; }
  .page-narrow { @apply max-w-xl mx-auto px-5 sm:px-6 pt-10 pb-20 animate-rise; }

  .eyebrow {
    @apply font-sans text-xs font-semibold uppercase tracking-[0.18em] text-red;
  }
  .h-page { @apply font-display text-3xl sm:text-4xl font-semibold text-ink leading-tight; }

  /* — cards — */
  .card {
    @apply bg-raised border border-line rounded-2xl shadow-soft;
  }
  /* Card the shared /c/:token link scrolls to gets a brief highlight. */
  .card:target {
    animation: card-target-flash 2s ease-out 1;
  }
  @keyframes card-target-flash {
    0%, 40% { @apply ring-2 ring-red/60; }
    100%    { @apply ring-2 ring-red/0; }
  }

  /* — buttons — */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 font-sans font-semibold text-sm
           rounded-full px-5 py-2.5 cursor-pointer transition
           border border-transparent select-none;
  }
  .btn-primary {
    @apply bg-red text-paper hover:bg-red-deep shadow-soft;
  }
  .btn-secondary {
    @apply bg-transparent text-ink border-line hover:border-ink/30 hover:bg-ink/[.03];
  }
  .btn-ghost {
    @apply bg-transparent text-ink-soft hover:text-red px-3;
  }
  .btn-sm { @apply text-xs px-3.5 py-1.5; }

  /* — form controls — */
  .field-label { @apply block font-sans text-sm font-semibold text-ink mb-1.5; }
  .field {
    @apply w-full bg-raised border border-line rounded-xl px-3.5 py-2.5 text-ink
           placeholder:text-ink-faint
           focus:border-red focus:outline-none focus:ring-2 focus:ring-red/15 transition;
  }

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

  /* — surfaces — */
  .flash { @apply rounded-xl px-4 py-3 text-sm font-medium border animate-rise; }
}

/* — tom-select theming to match the warm palette — */
.ts-control {
  background: #fffdf8 !important;
  border: 1px solid #e7ddcf !important;
  border-radius: 0.75rem !important;
  padding: 0.55rem 0.85rem !important;
  box-shadow: none !important;
  color: #2a1614 !important;
}
.ts-control.focus { border-color: #b21d1d !important; box-shadow: 0 0 0 2px rgba(178,29,29,.15) !important; }
.ts-dropdown {
  border: 1px solid #e7ddcf !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 12px 32px -10px rgba(42,22,20,.16) !important;
}
.ts-dropdown .active { background: #f3e3df !important; color: #7f1212 !important; }
.ts-dropdown .optgroup-header { color: #b21d1d !important; font-weight: 600; }