/* Kawa Musubi ブランドトークン v1.0 (2026-09-20)
 *
 * 正本は docs/brand/BRAND.md。このファイルは機械可読な写しで、
 * HP・プレオーダーページ・店頭PDF・SNS テンプレートが同じ値を使うための唯一の出所。
 * 値を変えるときは BRAND.md の表とこのファイルを同じ変更で直す
 * （片方だけ直すと画面と印刷で色が食い違う）。
 *
 * 使い方（HP に適用する場合。デプロイは承認ゲート）:
 *   <link rel="stylesheet" href="/brand-tokens.css"> を <head> の既存CSSより前に置き、
 *   既存の :root 変数をこのファイルの値へ寄せる。既存クラス名は変えない。
 */

:root {
  /* ── 色: 面 ── */
  --km-kinari:      #F7F3EA; /* 生成り。画面と紙の基本の地 */
  --km-shironeri:   #FDFBF6; /* 白練。カード・名刺・白場 */
  --km-ai:          #1E2A5C; /* 藍。主要面・ロゴ地 */
  --km-koai:        #131B3A; /* 濃藍。締め・濃部 */
  --km-sumi:        #1C1B19; /* 墨。本文の文字 */
  --km-nezumi:      #6B665E; /* 鼠。副次テキスト */
  --km-shu:         #B4492F; /* 朱。食べ物と価格にのみ使う（住所・時間・社会連携・ロゴには使わない） */
  --km-matcha:      #3D5A3E; /* 抹茶。植物・vegan の印 */
  --km-shinchu:     #A98B5C; /* 真鍮。上質の微アクセント（文字には使わない） */

  /* 補助（罫線・無効状態） */
  --km-line:        #DCD5C6; /* 生成り面の罫線 */
  --km-line-strong: #C3BAA6;
  --km-disabled:    #9A948A;

  /* ── 色: 画面（Web）だけの地と文字（2026-10-29。印刷物・店内には使わない） ── */
  --km-aizumi:        #171C2A; /* 藍墨。画面の地。藍を墨に近づけ、木目の写真の暖色とぶつからない */
  --km-aizumi-raised: #1D2333; /* 藍墨・浮き。選択肢・注意書きの面 */
  --km-aizumi-deep:   #11151F; /* 藍墨・深。フッター */
  --km-kinari-screen: #EDE6D6; /* 画面の生成り。暗い地で純白・紙の生成りより眩しくない */

  /* ── 意味づけされたトークン（面の役割） ── */
  --km-bg: var(--km-kinari);
  --km-surface: var(--km-shironeri);
  --km-surface-inverse: var(--km-ai);
  --km-text: var(--km-sumi);
  --km-text-muted: var(--km-nezumi);
  --km-text-inverse: var(--km-kinari);
  --km-border: var(--km-line);
  --km-accent: var(--km-shu);
  --km-mark-plant: var(--km-matcha);
  --km-mark-premium: var(--km-shinchu);

  /* ── 書体 ── */
  /* Display と本文は同じセリフ。太さと字間で階層を作り、書体を増やさない */
  --km-font-display: "Source Serif 4", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --km-font-text: "Source Serif 4", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --km-font-ui: "Source Sans 3", "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --km-font-jp: "Noto Serif JP", "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --km-font-jp-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 金額・数量はセリフの等幅数字で揃える */
  --km-font-num: "Source Serif 4", "Noto Serif JP", Georgia, serif;

  /* ── 字の大きさ（画面 px / line-height） ── */
  --km-display: 2.75rem;   --km-display-lh: 1.12;
  --km-h1: 1.9rem;         --km-h1-lh: 1.25;
  --km-h2: 1.3rem;         --km-h2-lh: 1.35;
  --km-body: 1.0625rem;    --km-body-lh: 1.7;
  --km-small: 0.875rem;    --km-small-lh: 1.6;
  --km-label: 0.75rem;     --km-label-lh: 1.4;

  /* 字間（字面を締める） */
  --km-track-display: 0.06em; /* 大見出し・ロゴ */
  --km-track-label:   0.16em; /* 小見出しラベル（大文字） */
  --km-track-body:    0.01em;
  --km-track-jp:      0.02em;

  /* ── 余白・かたち ── */
  --km-space-1: 4px;  --km-space-2: 8px;  --km-space-3: 12px;
  --km-space-4: 16px; --km-space-5: 24px; --km-space-6: 32px;
  --km-space-7: 48px; --km-space-8: 64px; --km-space-9: 96px;
  --km-rule: 1px;         /* 画面の罫線 */
  --km-keyline: 0.26mm;   /* 印刷 0.75pt。ロゴ・紙面の外枠 */
  --km-radius: 2mm;       /* 角丸はこれだけ。ピル型・大きい角丸は使わない */
  --km-radius-sm: 1mm;
  --km-photo-crop: 4 / 5; /* フィード・チラシの写真比 */
  --km-content-max: 62ch; /* 本文の行長（欧文） */
  --km-content-max-jp: 38em; /* 日本語の行長 38字 */

  /* 影は使わない。奥行きは余白と罫線で作る */
  --km-shadow: none;
}

/* 言葉の規則（SNS・ポスター・店内で同じ。正本は BRAND.md §7）
 *   1. 数字で書く。形容詞は1文に1つまで
 *   2. 一文一義。感嘆符は1投稿に1つ、絵文字は0〜3
 *   3. 媚びない（「みなさん」「応援して」を書かない）
 *   4. 事実 → 理由 → 行動 の順
 *   5. 使わない語: 本格・authentic・無添加・かわいい・話題・人気・行列・激安・お得・支援してください
 * 主コピーでは healthy / gezond / vegan を使わない（BRAND.md §14）。朱は食べ物と価格だけに使う。 */

/* 面の型（クラス名はこの接頭辞で統一する） */
.km-face-light { background: var(--km-bg);       color: var(--km-text); }
.km-face-paper { background: var(--km-surface);  color: var(--km-text); }
.km-face-dark  { background: var(--km-surface-inverse); color: var(--km-text-inverse); }

.km-label {
  font-family: var(--km-font-ui);
  font-size: var(--km-label);
  letter-spacing: var(--km-track-label);
  text-transform: uppercase;
  color: var(--km-text-muted);
}
.km-face-dark .km-label { color: var(--km-kinari); opacity: .8; }

.km-display {
  font-family: var(--km-font-display);
  font-weight: 300;
  font-size: var(--km-display);
  line-height: var(--km-display-lh);
  letter-spacing: var(--km-track-display);
}

.km-price { font-family: var(--km-font-num); font-variant-numeric: lining-nums tabular-nums; }