/* ============================================================
   BASE — CSS variables, reset, typography
   ============================================================ */

:root {
  /* ---- Brand nut palette ---- */
  --pistachio:    #b4cf9e;
  --cashew:       #a8a8a7;
  --almond:       #b89e7f;
  --peanut:       #ffc381;
  --macadamia:    #f3ead6;
  --pecan:        #af9292;
  --hazelnut:     #d8c6a1;
  --walnut:       #fff7b4;

  /* ---- Semantic tokens ---- */
  --bg-primary:   #f3ead6;
  --bg-secondary: #ede0c8;
  --bg-dark:      #2e1f0f;
  --bg-mid:       #4a3220;

  --accent-main:  #b89e7f;
  --accent-warm:  #c8905a;
  --accent-green: #b4cf9e;
  --accent-rose:  #af9292;

  --border-light: #d8c6a1;
  --border-mid:   #b89e7f;

  --text-primary: #2e1f0f;
  --text-sub:     #6b5040;
  --text-muted:   #a8a8a7;
  --text-on-dark: #f3ead6;

  /* ---- Legacy aliases ---- */
  --cream:      #f3ead6;
  --warm-white: #faf5ec;
  --nut-brown:  #b89e7f;
  --deep-brown: #2e1f0f;
  --caramel:    #b89e7f;
  --light-tan:  #d8c6a1;
  --text-main:  #2e1f0f;
  --text-sub:   #6b5040;

  /* ---- Typography ---- */
  --font-display: 'EB Garamond', serif;
  --font-body:    'Noto Sans JP', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.8;
}

img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}