/*
 * assets/css/tokens.css
 *
 * デザイントークン：カラー・タイポグラフィ・行間の共通定義。
 * Tailwind の extend.colors と必ず同じ値を保つ。
 * 変更は必ずここだけで行い、各ページで独自定義しないこと。
 */

/* ─────────────────────────────────────────
   カラー変数（CSS Custom Properties）
   Tailwind の bgMain / brandOlive 等と対応
──────────────────────────────────────────── */
:root {
  --color-bg-main:        #FAF8F3; /* ほんの少し生成り色（ベース） */
  --color-bg-sec:         #F3EFE6; /* セクション背景 */
  --color-bg-card:        #FFFFFF; /* カード背景 */
  --color-brand-olive:    #556B2F; /* ダークオリーブグリーン */
  --color-key-brown:      #8B6B3D; /* キーカラー（木樽・醤油の茶色） */
  --color-accent-cta:     #D97A2B; /* 柿色 */
  --color-status-success: #6E9E48;
  --color-status-alert:   #C56D5C;
  --color-text-main:      #2A2A2A; /* 墨のような深い温かみのある黒 */
  --color-text-sub:       #555555;
  --color-text-muted:     #888888;
  --color-decor-miso:     #FFF9ED; /* 人気商品飾り背景 */
  --color-decor-additive: #E6F2DA; /* 無添加マーク飾り背景 */
}

/* ─────────────────────────────────────────
   ベーススタイル
──────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background-color: var(--color-bg-main);
  /* 麻や和紙のような上質な手ざわりを感じさせる極微細な紙ノイズテクスチャ */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
  color: var(--color-text-main);
  line-height: 2.0; /* 40代女性がゆったりと情緒的に読み進められる、広めの行間設定 */
  letter-spacing: 0.05em;
}

/* 真っ黒を徹底して排除 */
h1, h2, h3, h4, h5, h6, p, span, a, li, input, select {
  color: var(--color-text-main);
}

html {
  scroll-behavior: smooth;
}

/* ─────────────────────────────────────────
   フォントファミリークラス
──────────────────────────────────────────── */
/* 和文情緒を醸し出す明朝・楷書フォント */
.font-serif-jp {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "HiraMinProN-W3", "MS PMincho", serif;
}

/* 欧文のエディトリアルセリフフォント */
.font-serif-en {
  font-family: "Georgia", "Times New Roman", serif;
}

/* ─────────────────────────────────────────
   見出しサイズ（PCとSPのレスポンシブ設計）
──────────────────────────────────────────── */
.h1-style {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .h1-style {
    font-size: 44px;
    line-height: 1.5;
  }
}

.h2-style {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media (min-width: 768px) {
  .h2-style {
    font-size: 30px;
  }
}

.h3-style {
  font-size: 20px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .h3-style {
    font-size: 24px;
  }
}

/* ─────────────────────────────────────────
   装飾クラス
──────────────────────────────────────────── */
/* アシンメトリーな装飾：日本の伝統的な「のし」や「二重細線」 */
.border-double-olive {
  border: 4px double rgba(85, 107, 47, 0.25);
}

/* 縦書き要素（PC時に右側にそっと添える） */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}