/* Izzi Wines — site stylesheet
   Base + interactive states. Layout/typography for each block is authored inline
   in app.js (ported 1:1 from the Claude Design source) to keep pixel parity;
   this file only carries what inline styles cannot express — resets, webfonts,
   hover/focus states, and the wine-glass fill animation. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter+Tight:wght@300;400;500;600&display=swap');

:root {
  /* Additional token requested alongside the bound design-system palette.
     Not part of _ds/tokens/colors.css and not yet assigned to any element —
     defined here so it's available if/where you want it used. */
  --soft-beige: #b9a982;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f7f1e6;
  color: #2a2520;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
a { color: #c75d3f; text-decoration: none; }
a:hover { color: #9c4429; }
img { display: block; }
button { font: inherit; }

@keyframes izzi-bubble {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 0.95; }
  85% { opacity: 0.7; }
  100% { transform: translateY(-27px) scale(1); opacity: 0; }
}

/* Nav links (top nav + producer sub-nav) */
.nav-link:hover { background: #ecdfc7; color: #2a2520; }

/* Primary pill buttons (terracotta) */
.btn-primary:hover { background: #9c4429 !important; transform: translateY(-1px); }

/* Outline pill buttons (prev/next) */
.btn-outline:hover { background: #ecdfc7; color: #2a2520; }

/* Wine-card ghost cta (cards layout, unused by default but kept for parity) */
.btn-ghost-round:hover { background: #ecdfc7; color: #9c4429; }

/* Form fields */
.field-input:focus {
  border-color: #6a9ea3;
  box-shadow: 0 0 0 3px rgba(169, 196, 199, 0.45);
}

/* Producer index rows */
.producer-row { --wine-fill: 0; }
.producer-row:hover { background: #fdf9f1; --wine-fill: 1; }

/* Wine list rows (producer page) */
.wine-row:hover { background: #f7f1e6; }

/* Keyboard focus ring, per design-system token (--focus-ring, lake) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #a9c4c7;
  outline-offset: 2px;
}

/* Empty image-slot placeholder (no photo supplied yet) */
.img-slot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecdfc7;
  color: #8a8067;
  font-size: 12px;
  font-weight: 300;
  text-align: center;
  padding: 12px;
  line-height: 1.5;
}