/* 設計トークン。**色・余白・角丸・文字サイズをここでしか決めない。**
 *
 * これより前は各CSSが hex を直書きしていて、赤系だけで14通り・角丸は10通り・
 * 文字サイズは14通りあった。「なんとなく揃っていない」の正体はそれで、
 * 個々の画面を直しても揃わない（次に足した画面がまた別の値を持つ）。
 *
 * 配色は**無彩色が地、青は差し色**。ナビと面をグレーで組み、青は
 * 「いま居る場所」と「主たる操作」にだけ使う。青が画面の9割を占めていると、
 * 青が何も意味しなくなる。 */

:root {
  /* --- 面と地（明るい側） --- */
  --canvas:#F5F6F7;          /* 画面の地 */
  --surface:#FFFFFF;         /* カード・表・フォームの面 */
  --surface-2:#F7F9FA;       /* 面の中の一段沈んだ地（コード・引用・偶数行） */
  --surface-3:#EEF1F4;       /* 表の見出し・押していない部品の地 */
  --line:#DDE1E5;            /* 既定の罫 */
  --line-strong:#C3CAD1;     /* 強い区切り */

  /* --- 文字 --- */
  --ink:#1F2933;             /* 本文 */
  --ink-2:#5A646E;           /* 補助・説明文 */
  --ink-3:#8B959E;           /* さらに弱い（プレースホルダ・行番号） */
  --ink-on-accent:#FFFFFF;

  /* --- ナビ（暗い側）。ここだけ地が濃い --- */
  --nav-bg:#22272E;
  --nav-ink:#C0C8D0;
  --nav-ink-strong:#FFFFFF;
  --nav-ink-dim:#7F8A95;
  --nav-hover:#2C333B;
  --nav-active:#39424C;
  --nav-line:#31383F;

  /* --- 差し色（現在地・主ボタン・リンク） --- */
  --accent:#29527E;
  --accent-hover:#1F4267;
  --accent-soft:#E9EFF6;     /* 選択中の面 */
  --accent-line:#B9CEE0;

  /* --- 状態。面・罫・文字の3点セットで持つ（片方だけ足すとちぐはぐになる） --- */
  --ok:#2B6E52;   --ok-soft:#E9F2EC;   --ok-line:#B6D3C2;
  --warn:#8A5A12; --warn-soft:#FBF3E4; --warn-line:#E5CF9F;
  --bad:#A8402E;  --bad-soft:#FBEDEA;  --bad-line:#E6BAB2;

  /* --- 余白。4の倍数だけ --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* --- 角丸。3種＋丸（10種あったものを畳んだ） --- */
  --r1:4px; --r2:8px; --r3:12px; --r-pill:999px;

  /* --- 文字サイズ。5段＋数値表示用の1段 --- */
  --f-xs:11px;   /* しるし・脚注 */
  --f-sm:12px;   /* 補助・表の見出し */
  --f-md:13px;   /* 表・フォームの本文 */
  --f-lg:15px;   /* 会話の本文・画面見出し */
  --f-xl:20px;   /* ログイン等の見出し */
  --f-num:24px;  /* ダッシュボードの数値 */

  /* --- 影。2種だけ。浮いているものと、載っているもの --- */
  --sh1:0 1px 2px rgba(16,24,32,.06), 0 1px 1px rgba(16,24,32,.04);
  --sh2:0 8px 24px rgba(16,24,32,.14);

  /* --- 字面 --- */
  --font:system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI",
         "Noto Sans JP", "Yu Gothic", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;

  /* --- 骨格の寸法 --- */
  --nav-w:236px;
  --top-h:48px;
  --bar-h:58px;   /* スマホの下部タブバー。**ここで定義する** ——
                     媒体条件の中だけで持つと、条件がずれた瞬間に未定義になる */

  /* --- 旧名。**残す。** 見落とした指定が黙って色を失うのを防ぐ --- */
  --bg:var(--canvas);
  --muted:var(--ink-2);
  --fg:var(--ink);
}