/* ------------------------------------------------------ */
/* SHOP.4MEAND — BASE STYLES (TOKENS, RESET, UTILITIES)   */
/* ------------------------------------------------------ */

/* ------------------------------ */
/* TOKENS / DESIGN SYSTEM         */
/* ------------------------------ */

:root {
  --ink: #1a1a18;
  --parchment: #f5f0e8;
  --sage: #c5c9b8;
  --moss: #0b3d2e;
  --blush: #e8d5c4;
  --terracotta: #b85c38;
  --cream: #faf6ee;
  --gold: #c9a84c;
  --soft-gray: #e2ddd6;

  --font-disp: 'Playfair Display', serif;
  --font-jp: 'Noto Serif JP', serif;
  --font-body: 'DM Sans', sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ------------------------------ */
/* RESET                          */
/* ------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------ */
/* UTILITIES                      */
/* ------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* Fade-up animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  animation: fadeUp .7s var(--ease) forwards;
}

.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .22s; }
.delay-3 { animation-delay: .36s; }
.delay-4 { animation-delay: .5s; }
.delay-5 { animation-delay: .64s; }