:root {
  /* 面 */
  --bg:           #f4efe3;  /* 生成り（基本背景） */
  --bg-card:      #faf7f0;  /* カード面 */
  --bg-sub:       #f5f3ee;  /* お題カード等のサブ面 */

  /* 文字 */
  --ink:          #2b2925;  /* 見出し・墨 */
  --text:         #5b554c;  /* 本文 */
  --muted:        #a89b86;  /* 補助・飾りのみ。重要情報に使わない */

  /* アクセント */
  --accent:        #7a9e7e; /* 細線・タグ・バッジなど淡いアクセント用 */
  --accent-strong: #4a6650; /* CTA・ボタン（白文字が乗る箇所）用 */
  --accent-ink:    #ffffff;

  /* 線・形 */
  --line:   #e6ddcb;
  --radius: 16px;
  --shadow: 0 2px 16px rgba(43, 41, 37, .06);

  /* 字 */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ─── 土台（老眼配慮）─────────────────────────────────── */
body {
  background:     var(--bg);
  color:          var(--text);
  font-family:    var(--sans);
  font-size:      17px;
  line-height:    1.85;
  letter-spacing: .01em;
}

h1, h2, h3 {
  font-family: var(--serif);
  color:       var(--ink);
  line-height: 1.5;
}

a { color: var(--accent-strong); }

.card, [class*="card"] {
  background:    var(--bg-card);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
}

hr, .divider {
  border:     none;
  border-top: 1px solid var(--line);
}

/* ─── フロストバー（タグ問わずクラスで当てる）─────── */
.frost-bar {
  position:            sticky;
  top:                 0;
  z-index:             50;
  background:          rgba(244, 239, 227, 0.72);
  backdrop-filter:     blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:       1px solid rgba(43, 41, 37, 0.08);
}

/* ─── タップ領域（指で押せる大きさ）─────────────────── */
button, .btn, [role="button"] {
  min-height:    48px;
  border-radius: var(--radius);
}

.btn-primary {
  background: var(--accent-strong);
  color:      var(--accent-ink);
}