/* ==============================
   assets/css/tokens.css
   デザインの最小単位（色・文字・余白など）。公開ページ・管理画面・ビューアの全部がこれを読む
   値を変えるときは、先に ds/PROJECT.md の決定事項を直してから、ここを合わせる
   ============================== */

:root {
    /* ---- 色 ---- */
    --color-bg:  #DDD8CE;   /* 地（ページの背景）：グレージュ */
    --color-ink: #1A2236;   /* 文字：ネイビー */
    --color-surface: #E4E0D7;   /* 面（カード・パネル）：地より一段だけ明るい。影はつけない */

    /* ---- 書体（2026-10-25）。Google Fonts を <link> で読む ---- */
    --font-body: "IBM Plex Sans JP", system-ui, sans-serif;   /* 本文・日本語すべて */
    --font-dot:  "DotGothic16", var(--font-body);              /* 英数字だけドット絵風。日本語は Plex で出る */

    /* ---- 文字の大きさ（2026-10-25 コンパクト）。この段の中から選ぶ ---- */
    --t1: 11px;   /* 日付・種類などの小さな情報 */
    --t2: 13px;   /* 区画の英語の名前・「すべて見る」 */
    --t3: 14px;   /* 本文 */
    --t4: 16px;   /* 1件ずつのタイトル・継続日数の数字 */
    --t5: 20px;   /* 区画の見出し・ページの見出し */

    /* ---- 余白（2026-10-25 コンパクト。4px 刻み）。この段の中から選ぶ ---- */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 40px;   /* MV の内側の余白・ページ送りの上など */
    --s7: 110px;  /* 区画と区画のあいだ・強調する帯（TOOLS）の上下・フッターの上。段の中でここだけ 4px 刻みでない（2026-10-25 ユーザー指定） */
}