/* -------------------------------------------------------
   Design tokens (moved from tailwind.config)
-------------------------------------------------------- */
:root {
  --stone-base: #F9F8F6;
  --wine-deep: #4A0E0E;
  --wine-muted: #722F37;
  --ink: #1A1A1A;
}

/* -------------------------------------------------------
   Font helpers
-------------------------------------------------------- */
.font-sans {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

.font-serif {
  font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
}

/* -------------------------------------------------------
   Color utility classes (Tailwind-like)
-------------------------------------------------------- */
.bg-stone-base {
  background-color: var(--stone-base);
}

.text-stone-base {
  color: var(--stone-base);
}

.bg-ink {
  background-color: var(--ink);
}

.text-ink {
  color: var(--ink);
}

.bg-wine-deep {
  background-color: var(--wine-deep);
}

.text-wine-deep {
  color: var(--wine-deep);
}

.text-wine-muted {
  color: var(--wine-muted);
}

/* -------------------------------------------------------
   Components
-------------------------------------------------------- */

/* Glass navigation bar */
.glass-nav {
  background: rgba(249, 248, 246, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Square product tile */
.bento-square {
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 1 / 1) {
  .bento-square {
    position: relative;
  }
  .bento-square::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .bento-square > * {
    position: absolute;
    inset: 0;
  }
}