/* Tasting Notes 共通トークン（設計書 §1.6）。各画面の CSS はこれを前提に組む。 */
:root {
  --paper: #FFFFFF;            /* 地（白一色） */
  --paper-2: #F3EFEA;          /* 第2面: タグ・QR枠・サブアバター */
  --hair: #E7E1D9;             /* ヘアライン */
  --ink: #2B2320;              /* 本文 */
  --ink-2: #7A6E66;            /* 補助（白地でコントラスト 4.9:1） */
  --wine: #5E1B24;             /* ボルドー: ヴィンテージ・主アバター・選択タグ・バー */
  --wine-2: #8A2432;
  --ok: #2E6B3A;
  --warn: #9A6B00;
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI', system-ui, sans-serif;
  --font-num: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;   /* ヴィンテージ・価格の大きな数字だけ */
  --radius: 18px;
  --radius-s: 10px;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; letter-spacing: .02em; font-weight: 400; }
* { box-sizing: border-box; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 500; }
.muted { color: var(--ink-2); }
/* 字間は .06em 以下・文字サイズは 12px 以上（設計書 §1.6）。影・グラデーション・絵文字は使わない */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.4; }
.tag.on { background: var(--wine); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-s); border: 1px solid var(--hair); background: #fff; cursor: pointer; font-weight: 500; }
.btn.primary { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn.primary:hover { background: var(--wine-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.card { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); }
.hair { border-top: 1px solid var(--hair); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
