/* usudon デザイントークン（仕様書 2.2）。まとめサイトの全ページが最初に読む。ここ以外に値を書かない。 */
:root{
  /* ---------- 色：地と面 ---------- */
  --ds-color-bg:              #efedec; /* ページの地。手本の rgb(239,237,236) */
  --ds-color-surface:         #ffffff; /* パネル・カード・ナビ・入力欄 */
  --ds-color-surface-sunken:  #f9f8f7; /* パネル内の帯、小さな札、表の見出し行、白の上の区画 */
  --ds-color-surface-hover:   rgba(34,34,34,.06); /* 透明なボタンや行のホバー */
  --ds-color-surface-selected:#e6e3e1; /* 選んだ行・選んだ日 */
  --ds-color-inverse:         #222222; /* 暗いパネル・主ボタンの地・曲線の面 */
  --ds-color-inverse-hover:   #3d3a39; /* 主ボタンのホバー */
  --ds-color-overlay:         rgba(17,17,17,.55); /* 写真の上に敷く暗幕 */

  /* ---------- 色：文字 ---------- */
  --ds-color-ink:          #222222; /* 本文・見出し */
  --ds-color-ink-soft:     #4f4a48; /* 説明文。地 #efedec の上で 7.4:1 */
  --ds-color-ink-faint:    #66615e; /* 日付・補足・件数。白 6.1:1、地 5.2:1、選択中の地 #e6e3e1 の上で 4.8:1（文字に使ってよい下限） */
  --ds-color-ink-placeholder: #75706d; /* 入力欄の例文。白の上で 4.9:1 */
  --ds-color-ink-disabled: #8a8583; /* 押せない部品の文字だけ（WCAG の対象外）。本文・例文には使わない */
  --ds-color-disabled-bg:  #d6d2d0; /* 押せない主ボタンの地。道具の「予定あり」の帯（--busy）にも使う */
  --ds-color-on-inverse:      #ffffff; /* 暗い面の上の文字 */
  --ds-color-on-inverse-soft: #c9c3c1; /* 暗い面の上の補足文字。#222 の上で 9:1 */

  /* ---------- 色：線 ---------- */
  --ds-color-line:        #dfdad9; /* 区切り線・カードの枠。手本の実測値 */
  --ds-color-line-strong: #c9c3c1; /* ピルの枠・リンクの下線 */
  --ds-color-line-input:  #8f8986; /* 入力欄・チェックボックスの枠。白の上で 3.4:1（形が読める下限） */
  --ds-color-line-ink:    #222222; /* 枠線ボタン・フッター列の上の線 */

  /* ---------- 色：状態（意味のある色。装飾に使わない） ---------- */
  --ds-color-danger:    #b3261e; --ds-color-danger-bg:  #fbeae8;
  --ds-color-warn:      #8a5a00; --ds-color-warn-bg:    #fbf3df; --ds-color-warn-line: #e2c27a; /* 注意の箱の枠 */
  --ds-color-ok:        #2f7a4f; --ds-color-ok-bg:      #e8f3ec;
  --ds-color-info:      #2f5f9e; --ds-color-info-bg:    #eaf0f8;

  /* ---------- 色：フォーカス ---------- */
  --ds-color-focus:         #222222; /* 明るい面 */
  --ds-color-focus-inverse: #ffffff; /* 暗い面・写真の上 */

  /* ---------- 色：作品色（作品ごとに上書きする。既定は無彩色） ---------- */
  --ds-work-accent: #66615e; /* 作品の識別点・挿絵の線・見本の上辺 3px にだけ使う */
  --ds-work-wash:   #e6e3e1; /* 作品タイル・挿絵の地にだけ使う */

  /* ---------- 文字 ---------- */
  --ds-font-ja:   "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --ds-font-en:   "Inter", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --ds-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --ds-fw-regular: 400;
  --ds-fw-medium:  500;
  --ds-fw-bold:    700;

  --ds-ls-ja:      -0.02em; /* 14px 以上の和文 */
  --ds-ls-ja-small: 0;      /* 13px 以下の和文（詰めると読みにくい） */
  --ds-ls-en:      -0.02em; /* Inter のラベル・日付 */
  --ds-ls-display:  0;      /* Inter の大見出し（手本は normal） */

  /* サイト用の段階（スマホの値。PC は下の @media で上書き） */
  --ds-fs-display: 40px;  /* 英字の大見出し */
  --ds-fs-hero:    26px;  /* ファーストビューのコピー */
  --ds-fs-h1:      28px;  /* 下層ページの h1（和文） */
  --ds-fs-h2:      24px;  /* パネルの和文見出し */
  --ds-fs-h3:      20px;  /* 下層ページの h2、カードの見出し（大） */
  --ds-fs-lead:    17px;  /* リード文 */
  --ds-fs-title:   16px;  /* お知らせの見出し・カードの見出し（小） */
  --ds-fs-sub:     14px;  /* 英字見出しの下の和文 */
  --ds-fs-body:    15px;  /* 本文 */
  --ds-fs-small:   13px;  /* 補足・フッターの小さな札 */
  --ds-fs-label:   12px;  /* Inter のラベル・日付・ピル */
  --ds-fs-micro:   11px;  /* 著作権表記だけ */

  --ds-lh-display: 1.0;
  --ds-lh-heading: 1.5;
  --ds-lh-body:    1.8;
  --ds-lh-tight:   1.3;  /* 2 行までの短い見出し・カードの見出し */
  --ds-lh-ui:      1;    /* ボタン・ピル・ラベル（高さは箱で決める） */

  /* ---------- 余白（4px 単位） ---------- */
  --ds-space-1:   4px;
  --ds-space-2:   8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  --ds-space-24: 96px;
  --ds-space-30: 120px;
  --ds-space-40: 160px;

  /* 面ごとの余白（スマホの値。@media で上書き） */
  --ds-gutter:         16px;  /* 画面端から中身までの左右の余白 */
  --ds-panel-inset:     8px;  /* 画面端からパネルまで */
  --ds-panel-pad:      20px;  /* パネルの内側の余白（左右） */
  --ds-panel-pad-y:    48px;  /* パネルの内側の余白（上下） */
  --ds-section-gap:    72px;  /* セクションとセクションの間 */
  --ds-heading-gap:    32px;  /* セクション見出しから中身まで */

  /* ---------- 角丸 ---------- */
  --ds-radius-xs:     2px;   /* 小さな札・表のセル内のタグ */
  --ds-radius-sm:     4px;   /* ボタン・入力欄・ナビのピル・道具のタブ */
  --ds-radius-md:     8px;   /* カード（道具）・サムネイル・メニュー・Menu ボタン・吹き出し */
  --ds-radius-lg:    16px;   /* パネル内の画像・カード（サイト）・モーダル */
  --ds-radius-panel: 16px;   /* 大きいパネル（PC で 40px に上書き） */
  --ds-radius-pill: 999px;   /* カテゴリのピル・丸い矢印ボタン */

  /* ---------- 影（手本はほぼ影なし。浮くものにだけ使う） ---------- */
  --ds-shadow-0: none;                                                      /* パネル・カード */
  --ds-shadow-1: 0 0 4px rgba(34,34,34,.10);                                /* ナビのピル・固定ヘッダーの上の部品 */
  --ds-shadow-2: 0 0 1px rgba(34,34,34,.16), 0 6px 16px -6px rgba(34,34,34,.16); /* メニュー・ポップオーバー・ドラッグ中のカード */
  --ds-shadow-3: 0 0 1px rgba(34,34,34,.16), 0 24px 48px -16px rgba(34,34,34,.28); /* モーダル */

  /* ---------- 線 ---------- */
  --ds-border:        1px solid var(--ds-color-line);
  --ds-border-strong: 1px solid var(--ds-color-line-strong);
  --ds-border-input:  1px solid var(--ds-color-line-input);
  --ds-border-ink:    1px solid var(--ds-color-line-ink);
  --ds-focus-ring:    2px solid var(--ds-color-focus);
  --ds-focus-offset:  3px;

  /* ---------- 大きさ ---------- */
  --ds-container:      1344px; /* 中身の最大幅（1440 - 48×2） */
  --ds-container-text:  760px; /* 読む文章の最大幅（下層ページ） */
  --ds-measure:          40em; /* 段落 1 行の最大長（和文で約 40 字。5.1 の理由参照） */
  --ds-header-h:         60px; /* サイトの固定ヘッダーの下端（上 16 + 部品 44）。PC は 88px（上 40 + 部品 48） */
  --ds-app-header-h:     56px; /* 作品アプリのヘッダー（3.12）。画面幅で変えない */
  --ds-control-h:        48px; /* サイトのボタン・入力欄 */
  --ds-control-h-sm:     32px; /* 道具のボタン・入力欄（マウス） */
  --ds-tap-min:          44px; /* 指で押すものの最小 */
  --ds-pill-h:           28px; /* カテゴリのピル（手本の実測） */
  --ds-btn-gap:          24px; /* ボタンのラベルと「区切り＋矢印」の間の最小 */
  --ds-btn-sep-gap:      16px; /* 区切りと矢印の間 */

  /* ---------- 動き ---------- */
  --ds-ease:     cubic-bezier(0.4, 0.4, 0, 1); /* 手本の実測値 */
  --ds-dur-fast: 120ms; /* 道具のホバー */
  --ds-dur:      200ms; /* 開閉 */
  --ds-dur-slow: 300ms; /* サイトのホバー（手本の 0.3s） */

  /* ---------- 重なり順 ---------- */
  --ds-z-menu:    90; /* メニューの面はヘッダーの「下」。Menu/Close ボタンとロゴが面の上に残る */
  --ds-z-header: 100;
  --ds-z-modal:  300;
  --ds-z-toast:  400;
}

/* タブレット 640px〜 */
@media (min-width: 640px){
  :root{
    --ds-gutter:      32px;
    --ds-panel-inset: 12px;
    --ds-panel-pad:   40px;
    --ds-panel-pad-y: 64px;
    --ds-section-gap: 96px;
    --ds-heading-gap: 40px;
    --ds-radius-panel: 24px;
    --ds-fs-display: 52px;
    --ds-fs-hero:    30px;
    --ds-fs-h1:      34px;
    --ds-fs-h2:      28px;
    --ds-fs-sub:     16px;
  }
}
/* PC 900px〜 */
@media (min-width: 900px){
  :root{
    --ds-gutter:      48px;
    --ds-panel-pad:   80px;
    --ds-panel-pad-y: 96px;
    --ds-section-gap: 160px;
    --ds-heading-gap: 64px;
    --ds-radius-panel: 40px;
    --ds-header-h:    88px; /* 上 40 + ピル 48 */
    --ds-fs-display: 64px;
    --ds-fs-hero:    36px;
    --ds-fs-h1:      40px;
    --ds-fs-h2:      32px;
    --ds-fs-h3:      24px;
    --ds-fs-lead:    20px;
    --ds-fs-title:   18px;
    --ds-fs-sub:     18px;
    --ds-fs-body:    16px;
    --ds-fs-small:   14px;
    --ds-fs-label:   13px;
  }
}