/* ============================================================
 * ENGINE Design Lab — tokens.css
 * デザインシステムの実体（①）。色・級数・余白・角丸・影の CSS 変数。
 * 正本 = ../../docs/design.md §4/§5。値はそこと必ず一致させる。
 *
 * 由来: prototype/app_v2.py の :root ブロック（L49-76）から抽出。
 * 未使用トークン（--r-sm / --brand-cta / --primary* エイリアス）は
 * app_v2.py 内で一度も参照されておらず、docs/design.md にも記載が無いため
 * 意図的に落とした（Next.js 移行時に死んだトークンを引き継がないため）。
 * ============================================================ */

:root {
  color-scheme: light;

  /* ---- 地・文字（design.md §4.1） ---- */
  --bg: #faf7f1;                 /* 温かいクリーム */
  --surface: #ffffff;
  --fg: #3a352c;
  --head: #2b2620;               /* 見出し・温かい近黒 */
  --muted-fg: #9a9184;
  --border: #ece5d8;

  /* ---- ブランド（琥珀／ゴールド／ブロンズ）(design.md §4.1) ---- */
  --brand: #b8860b;              /* 琥珀ゴールド：見出しキーワード・アイコン・左罫・アクティブ */
  --brand-deep: #7a5310;         /* 深いブロンズ：本文 <b> 強調・小見出し */
  --brand-subtle: #fbf3e0;       /* 淡い地色 */
  --brand-subtle-fg: #8a5f12;
  --gold: #8a6a1a;               /* 確信度バッジ専用。brand と混ぜない */
  --gold-subtle: #f3ead4;

  /* ---- グラデーション ---- */
  --grad-brand: linear-gradient(135deg, #d4a537 0%, #bf8a1f 52%, #9a6512 100%);  /* CTA・バッジ・伸びるバー */
  --grad-wine:  linear-gradient(140deg, #6e4a12 0%, #573910 55%, #43290a 100%);  /* 結果カードの地。多用しない */

  /* ---- 角丸 ---- */
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* ---- 影 ---- */
  --sh-sm: 0 1px 2px rgba(60,45,20,.06), 0 1px 3px rgba(60,45,20,.05);
  --sh-md: 0 4px 16px rgba(70,50,15,.10), 0 2px 6px rgba(70,50,15,.06);
  --glow:  0 10px 30px rgba(150,110,20,.22);

  /* ---- 書体（design.md §5.1：明朝＝品格の担い手。ここをゴシックにすると ENGINE でなくなる） ---- */
  --font:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

/* ---- ベース適用（app_v2.py の html,body,p,... 一括指定を素のHTML向けに） ---- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  margin: 0;
}
h1, h2, h3 {
  color: var(--head);
  font-family: var(--font);
  margin: 0;
}
p { margin: 0; }
img { max-width: 100%; display: block; }

/* screens/*.html 共通のモバイル1カラム制約（design.md §3：カラム数=1カラム固定・@media は使わない） */
.app-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}