/* styles.css — shared design tokens + component styles across pages */

html, body { background: #FBF9F4; color: #1C1917; }
body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-width: 1280px;
}
/* "font-serif" is repurposed as our display class — DM Sans at medium weight for editorial feel at large sizes */
.font-serif {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
}
.font-serif.italic, .font-serif span.italic, .font-serif em {
  font-weight: 500; font-style: italic;
}
.font-mono { font-family: 'DM Mono', ui-monospace, monospace; }

/* hide native scrollbars on horizontal strips */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* drawer / modal transitions */
.drawer  { transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.drawer.open { transform: translateX(0); }
.scrim   { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scrim.show { opacity: 1; pointer-events: auto; }
.modal-card { opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .22s ease, transform .22s ease; }
.modal-card.open { opacity: 1; transform: translateY(0) scale(1); }

.toast { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* striped placeholder pattern */
.stripes {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.035) 0 1px,
    transparent 1px 14px
  );
}

/* focus rings */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px;
}

/* Category tile: text color adapts to slot state */
.cat-tile { color: var(--cat-fg, #1C1917); position: relative; }
.cat-tile[data-dark] { --cat-fg: #FBF9F4; }
.cat-tile:has(image-slot[data-filled]) { --cat-fg: #fff; }
.cat-tile:has(image-slot[data-filled])::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.06) 55%, transparent);
  z-index: 1;
}
.cat-tile > .cat-overlay { z-index: 2; }

/* Image slots are admin-only: shoppers see uploaded images but can't drop their own. */
.cat-tile:not(.admin) image-slot,
.prod-card:not(.admin) image-slot { pointer-events: none; }
.cat-tile:not(.admin) image-slot:not([data-filled]),
.prod-card:not(.admin) image-slot:not([data-filled]) { display: none; }

/* slim disclosure caret */
.caret { transition: transform .2s ease; }
.caret.open { transform: rotate(180deg); }

/* density */
[data-density="compact"] .density-pad-y { padding-top: .5rem; padding-bottom: .5rem; }
[data-density="comfy"]   .density-pad-y { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* ── Product card on all-products page ─────────────────────────────────────── */
.prod-card { position: relative; }
.prod-card .quick-add {
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.prod-card:hover .quick-add { opacity: 1; transform: translateY(0); }

/* ── NEW! badge ────────────────────────────────────────────────────────────── */
@keyframes new-badge-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 3px 10px rgba(220, 38, 38, .35); }
  50%      { transform: scale(1.07); box-shadow: 0 6px 18px rgba(220, 38, 38, .55); }
}
.new-badge {
  animation: new-badge-pulse 1.4s ease-in-out infinite;
  transform-origin: center;
  letter-spacing: 0.14em;
  z-index: 3;
}