/*
 * waganeko テーマ v2 — デザイントークン
 * 出典: Claude Design キャンバス "waganeko.com リデザイン" / ページ "テーマ案 v2"
 * ダークモードは OS の設定 (prefers-color-scheme) にだけ追従する。切替ボタンはない。
 */

:root {
  color-scheme: light dark;

  /* 色 — ライト (コントラスト比は --wgk-bg に対する値) */
  --wgk-bg: #fbfbf9;
  --wgk-text: #161616;      /* 17.5:1 */
  --wgk-sub: #5e5e59;       /* 6.3:1、チップの上で 5.7:1 */
  --wgk-line: #e3e2de;      /* 罫線 (文字には使わない) */
  --wgk-mat: #f0efeb;       /* 写真の台紙 */
  --wgk-chip: #f0efeb;      /* チップの背景 */
  --wgk-chip-hover: #161616;
  --wgk-chip-hover-text: #fbfbf9;
  --wgk-accent: #8a6a3b;    /* 本文のリンク・選択中の印 (4.8:1)。チップの上の文字には使わない */
  --wgk-gold: #d2b07a;      /* ロゴの点だけ。文字には使わない */

  /* 書体 — 英字 Urbanist、日本語 Zen Maru Gothic (どちらも 400 / 500) */
  --wgk-font: Urbanist, "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --wgk-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* 読み込みなし */
  --wgk-fw-regular: 400;
  --wgk-fw-medium: 500;

  /* 文字の大きさと行間 */
  --wgk-fs-title: 34px;     /* 記事タイトル */
  --wgk-fs-page: 32px;      /* アーカイブの見出し */
  --wgk-fs-feature: 28px;   /* トップの最新記事 */
  --wgk-fs-h2: 20px;        /* 本文の見出し・セクションの見出し (22px まで) */
  --wgk-fs-body: 16px;
  --wgk-fs-card: 16px;
  --wgk-fs-small: 14px;     /* ナビゲーション・補足 */
  --wgk-fs-chip: 13px;      /* チップ・キャプション */
  --wgk-fs-meta: 12px;      /* 日付・件数・撮影データ */
  --wgk-lh-body: 2;
  --wgk-lh-heading: 1.5;
  --wgk-lh-tight: 1.6;
  --wgk-ls-body: 0.04em;

  /* 余白 */
  --wgk-sp-1: 4px;
  --wgk-sp-2: 8px;
  --wgk-sp-3: 12px;
  --wgk-sp-4: 20px;
  --wgk-sp-5: 32px;
  --wgk-sp-6: 40px;
  --wgk-sp-7: 64px;
  --wgk-sp-8: 96px;
  --wgk-gutter: 40px;       /* 左右の余白 (600px 未満で 20px) */

  /* 角丸 — チップ・ボタン・入力欄だけ。写真は 0 */
  --wgk-radius: 4px;

  /* 幅 */
  --wgk-w-text: 680px;      /* 本文 (1 行 38〜40 字) */
  --wgk-w-photo: 1024px;    /* 古い写真は等倍まで */
  --wgk-w-wide: 1200px;     /* 一覧・大きな写真 */

  /* 台紙の中で写真が占める割合 */
  --wgk-mat-fill: 86%;

  /* フォーカス */
  --wgk-focus-width: 2px;
  --wgk-focus-offset: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wgk-bg: #111111;
    --wgk-text: #ecebe7;    /* 15.8:1 */
    --wgk-sub: #a3a29c;     /* 7.4:1、チップの上で 6.2:1 */
    --wgk-line: #2b2b29;
    --wgk-mat: #1a1a19;     /* 背景よりわずかに明るく */
    --wgk-chip: #232321;
    --wgk-chip-hover: #ecebe7;
    --wgk-chip-hover-text: #111111;
    --wgk-accent: #d2b07a;  /* 9.2:1 */
    --wgk-gold: #d2b07a;
  }
}

@media (max-width: 599px) {
  :root {
    --wgk-gutter: 20px;
    --wgk-fs-title: 24px;
    --wgk-fs-page: 24px;
    --wgk-fs-feature: 21px;
    --wgk-fs-card: 14px;
    --wgk-lh-body: 1.95;
  }
}

/* ブレークポイント (CSS 変数はメディアクエリに使えないため、値をここに記録する)
 *   sm: 〜599px   一覧 2 列 (正方形の台紙)、記事の写真は画面の端まで
 *   md: 600〜959px 一覧 2 列 (3:2 の台紙)
 *   lg: 960px〜   一覧 3 列 (3:2 の台紙)
 */