@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --header-h: 64px;
  color-scheme: light;
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
  body { @apply bg-paper text-ink font-sans antialiased; font-weight: 300; font-size: 15px; line-height: 1.6; }
  h1, h2, h3 { @apply font-display; font-weight: 400; letter-spacing: -0.005em; }
  a { text-underline-offset: 4px; }
  ::selection { background: #E3D4C2; }
  :focus-visible { outline: 1.5px solid #A57A32; outline-offset: 3px; }
  input, select, textarea { font: inherit; }
}

@layer components {
  /* Navigation and small UI text echo the reference's spaced capitals; kept to nav, buttons and status only. */
  .nav-type { @apply text-[12px] uppercase tracking-[0.14em] font-normal; }
  .btn { @apply inline-flex items-center justify-center gap-2 px-7 h-12 nav-type border border-ink transition-colors duration-300 ease-silk disabled:opacity-40 disabled:cursor-not-allowed; }
  .btn-solid { @apply btn bg-ink text-paper hover:bg-paper hover:text-ink; }
  .btn-line { @apply btn bg-transparent text-ink hover:bg-ink hover:text-paper; }
  .link-line { @apply nav-type underline underline-offset-[6px] decoration-[0.5px] hover:decoration-gilt hover:text-gilt transition-colors; }
  .field { @apply w-full h-12 px-4 bg-paper border border-sand text-ink placeholder:text-stone/70 focus:border-ink focus:outline-none transition-colors; }
  .field-area { @apply field h-auto py-3 min-h-[110px]; }
  .label { @apply block text-[13px] text-stone mb-1.5; }
  .wrap { @apply mx-auto w-full max-w-[1680px] px-5 md:px-10; }
  .eyebrow-status { @apply text-[12px] tracking-[0.06em] text-gilt; }

  .prose-veloura { @apply font-display text-[20px] leading-[1.6] text-ink max-w-[62ch]; }
  .prose-veloura h2 { @apply text-[30px] mt-12 mb-3 leading-tight; }
  .prose-veloura h3 { @apply text-[24px] mt-8 mb-2; }
  .prose-veloura p { @apply mb-5; }
  .prose-veloura ul { @apply list-disc pl-6 mb-5; }
  .prose-veloura em, .prose-veloura i { @apply text-stone; }
}

/* Image swap on hover, as on the reference category panels */
.swap { position: relative; overflow: hidden; }
.swap > .swap-b { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) { .swap:hover > .swap-b { opacity: 1; } }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 60s linear infinite; width: max-content; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Page-load reveal for the hero, once */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .9s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

table.size-guide { @apply w-full text-sm border-collapse; }
table.size-guide th, table.size-guide td { @apply border-b border-sand py-2 pr-4 text-left font-normal; }