/* ===========================================================
   Luna Herbtea LP v3 — Design Tokens
   ブランドガイド準拠。写真主導・柔らかい余白・游明朝系見出し。
   =========================================================== */

:root {
  /* --- Surfaces（極淡・温かい白〜グレージュ）--- */
  --paper:      #fcfaf6; /* ページ地（温かい極淡）*/
  --cream:      #f6f1e6; /* シャンパン地（セクション交互・淡面）*/
  --greige:     #f3eee7; /* ライトグレージュ */
  --sand:       #ebdfcf; /* サンドベージュ（淡面・チップ）*/
  --white:      #ffffff;

  /* --- Brand greens --- */
  --sage:       #66cdaa; /* ブランドセージ（マーカー芯・アクセント）*/
  --sage-mut:   #a8bba2; /* くすみセージ（CTAカード地）*/
  --sage-soft:  #c7d1c0; /* やわらかセージ（淡面・装飾）*/
  --sage-pale:  #e4ebe0; /* 最も淡いセージ面 */
  --olive:      #4e5a4a; /* ディープオリーブ（見出し・線・アイコン線）*/
  --olive-mut:  #88997e; /* 中間オリーブ（ゴーストボタン枠）*/
  --taupe:      #bbaa99; /* ウォームトープ */

  /* --- Pinks（CTA・要点・数字の山のみ。柔らかいダスティ＋濃ローズ）--- */
  --dusty:      #e9c9c6; /* ダスティピンク（淡面・吹き出し）*/
  --dusty-soft: #f4e4e2; /* 最も淡いピンク面 */
  --pink:       #db7093; /* ローズピンク（CTAピル）*/
  --pink-deep:  #c45c7e; /* 濃ローズ（要点強調・ホバー）*/

  /* --- Ink --- */
  --ink:        #423d36; /* 見出し（温かいダーク）*/
  --ink-body:   #5d564c; /* 本文 */
  --ink-soft:   #8b8378; /* 補助 */
  --line:       #e8e0d4; /* 罫線・境界 */
  --line-soft:  #efe9df;

  /* --- Radius --- */
  --radius-sm:  10px;
  --radius:     18px;
  --radius-lg:  26px;
  --radius-xl:  34px;
  --radius-pill: 999px;

  /* --- Shadow（淡く・温色・拡散）--- */
  --shadow-sm: 0 2px 14px rgba(120,108,92,.05);
  --shadow:    0 16px 40px rgba(120,108,92,.07);
  --shadow-lg: 0 26px 64px rgba(120,108,92,.12);

  /* --- Spacing --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* --- Type（H見出し=游明朝, 本文=Noto Sans JP, 欧文=Cormorant）--- */
  --font-mincho: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --font-gothic: "Noto Sans JP", sans-serif;
  --font-latin:  "Cormorant Garamond", serif;

  --maxw: 720px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;          /* Body 16/1.8（ガイド準拠）*/
  color: var(--ink-body);
  background: var(--paper);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
/* 見出しは游明朝、行間を詰める（H1 1.4 / H3 1.5）*/
h1, h2, h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }

.latin { font-family: var(--font-latin); letter-spacing: .01em; }
.logo  { font-family: var(--font-latin); font-weight: 600; letter-spacing: .05em; }

/* ===== ごく薄い和紙グレイン ===== */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSdnZic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuODUnIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjZ2YpJy8+PC9zdmc+");
  mix-blend-mode: multiply;
  z-index: 0;
}