/**
 * デザイントークン。site.css はここで定義した変数のみを使う。
 * 出典: design/design_brief_hidden_news.md、design/stitch_extracted/.../DESIGN.md
 */
:root {
  /* --- 色: 面 --- */
  --hn-color-bg: #fbf9f8;              /* ページ背景 */
  --hn-color-surface: #ffffff;         /* カード面 */
  --hn-color-surface-dim: #f6f3f2;     /* 淡い面（注意帯・カード背景） */
  --hn-color-surface-dim2: #f0eded;    /* さらに淡い面（カードホバー） */
  --hn-color-chip-bg: #e4e2e1;         /* 札（カテゴリ）の灰背景 */

  /* --- 色: 文字 --- */
  --hn-color-text: #1b1c1c;            /* 本文・見出し */
  --hn-color-text-sub: #4e453d;        /* サブ文字・キャプション */
  --hn-color-meta-link: #545f72;       /* メタ情報・リンク色 */

  /* --- 色: 罫線 --- */
  --hn-color-border: #d2c4b9;          /* 罫線 */
  --hn-color-border-strong: #80756b;   /* 濃い罫線・非活性テキスト */

  /* --- 色: 媒体種別バッジ --- */
  --hn-color-badge-state-bg: #dfe4ee;    /* 国営系バッジの背景（くすんだ青灰） */
  --hn-color-badge-state-text: #3c475a;  /* 同・文字 */
  --hn-color-badge-indep-bg: #e2e7de;    /* 独立系バッジの背景（くすんだ緑灰） */
  --hn-color-badge-indep-text: #3a4636;  /* 同・文字 */

  /* --- 色: アクセント（未報道札） --- */
  --hn-color-accent-bg: #735a3e;       /* 「日本では未報道」札の背景 */
  --hn-color-accent-text: #ffffff;     /* 同・文字 */

  /* --- 色: 横棒グラフ --- */
  --hn-color-bar-fill: #506072;        /* 横棒フィル */
  --hn-color-bar-track: #eae8e7;       /* 横棒トラック */

  /* --- spacing --- */
  --hn-space-1: 4px;
  --hn-space-2: 8px;
  --hn-space-3: 16px;
  --hn-space-4: 24px;
  --hn-space-5: 48px;

  /* --- 形状 --- */
  --hn-radius: 2px;      /* 控えめな角丸 */
  --hn-border-width: 1px;

  /* --- レイアウト --- */
  --hn-max-width: 860px;  /* PC の本文幅。将来サイドに広告等を置くなら 720px に戻す */
  --hn-mobile-width: 380px;

  /* --- フォント（Web フォント禁止・システムフォントのみ） --- */
  --hn-font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
  --hn-font-heading: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --hn-font-size-body: 16px;
  --hn-font-size-body-sm: 15px;
  --hn-line-height-body: 1.7;
}