/* ============================================================
   tokens.css — 色・文字・余白の定義
   docs/05-デザインガイド.md のとおり。
   ★ 見た目を変えたいときは、このファイルだけを直す。
     他のCSS/JSに色やサイズを直書きしないこと。
   ============================================================ */

:root {
  /* ---- 背景 ---- */
  --bg:          #FAF8F4;   /* 生成り。アプリ全体の下地 */
  --bg-card:     #FFFFFF;   /* カード */
  --bg-sunken:   #F2EEE7;   /* 一段沈んだ面(入力欄・タブ帯) */

  /* ---- 線 ---- */
  --line:        #E5DFD5;   /* 区切り線。細く、薄く */
  --line-strong: #D6CDBF;

  /* ---- 文字 ---- */
  --text:        #3A3632;   /* 本文。真っ黒にしない */
  --text-sub:    #7A736A;   /* 補助 */
  --text-weak:   #A89F94;   /* 日付・件数など */

  /* ---- アクセント(1色だけ)くすんだ緑 = 成長・自然・安心 ---- */
  --accent:      #6E8B6E;
  --accent-weak: #E8EFE7;   /* 選択中の背景 */

  /* ---- 木を感じる差し色(少量) ---- */
  --brown:       #8C7B6B;

  /* ---- 注意(赤は使わない。くすんだ橙茶) ---- */
  --warn:        #B5714F;
  --warn-weak:   #F5EAE2;

  /* ---- 文字 ---- */
  --font: -apple-system, "Hiragino Sans", "Noto Sans JP",
          "Yu Gothic UI", sans-serif;
  /* 「今日のひとこと」と日記の本文だけ明朝にする = 和モダンの芯 */
  --font-quote: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  --fs-xs:  13px;   /* 件数・補足 */
  --fs-sm:  14px;   /* 日付・ラベル */
  --fs-md:  17px;   /* 本文(基準) */
  --fs-lg:  20px;   /* 画面見出し */
  --fs-xl:  24px;   /* 日付・今日のひとこと */
  --lh:     1.7;    /* 行間。詰めない */

  /* ---- 余白 ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;

  /* ---- 形 ---- */
  --radius:     12px;   /* カード */
  --radius-sm:   8px;   /* ボタン・チップ */
  --radius-full: 999px; /* ＋ボタン */
  --shadow: 0 1px 3px rgba(58, 54, 50, 0.06);   /* 影は1段だけ。極薄 */

  /* ---- 寸法 ---- */
  --tap: 44px;          /* タップ領域の最小 */
  --gutter: 16px;       /* 画面左右の余白 */
  --header-h: 56px;
  --tabbar-h: 56px;
}

/* 文字サイズ設定(設定画面から切り替える。STEP 21 で使う) */
:root[data-font="small"]  { --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; }
:root[data-font="large"]  { --fs-md: 19px; --fs-lg: 22px; --fs-xl: 26px; }

/* 夜。寝る前に日記を書くので必ず用意する */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #1C1A18;
    --bg-card:     #262320;
    --bg-sunken:   #201E1B;
    --line:        #3A352F;
    --line-strong: #4A443C;
    --text:        #E8E2D9;
    --text-sub:    #ABA296;
    --text-weak:   #7E766B;
    --accent:      #8FA98F;
    --accent-weak: #2A322A;
    --brown:       #A2907E;
    --warn:        #C98A66;
    --warn-weak:   #2E2621;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  --bg:          #1C1A18;
  --bg-card:     #262320;
  --bg-sunken:   #201E1B;
  --line:        #3A352F;
  --line-strong: #4A443C;
  --text:        #E8E2D9;
  --text-sub:    #ABA296;
  --text-weak:   #7E766B;
  --accent:      #8FA98F;
  --accent-weak: #2A322A;
  --brown:       #A2907E;
  --warn:        #C98A66;
  --warn-weak:   #2E2621;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}