/* デザインの決まり（トークン）。2026-10-08 卓馬「UI/UXを根底から見直して完成度を上げる」の土台。
 *
 * なぜ作ったか：画面ごとに色・角丸・影・文字の大きさを直書きしていて（style.css だけで :root が6か所、
 * 青だけで #0b57d0 / #1a73e8 / #375bd2 / #3454f5 が混在）、同じ「主な操作」が画面ごとに違って見えた。
 * これからの画面は、値を直書きせずに必ずここの変数を使う（使い方は docs/DESIGN-SYSTEM.md）。
 *
 * 2つの層：
 *  ・道具（tool）＝入力・一覧・結果。白い面と1つの差し色（青）だけ。Google のツールのように静かに
 *  ・世界（world）＝キャラクター・オフィス・AIエージェントの帯。紺と金（ドラクエ風）
 * 差し色の青は今の #0b57d0 のまま（変えると直書きの青と2色になるため）。
 * このファイルは値を決めるだけで、画面の見た目は変えない。全ページで最初に読む。
 */
:root{
 /* ── 色：道具の面 ───────────────────────── */
 --ds-bg:#f6f8fb;            /* ページの地 */
 --ds-surface:#ffffff;       /* カード・ダイアログ */
 --ds-surface-2:#f0f4f9;     /* 面の中の一段下げた面（入力のまとまり・表の見出し） */
 --ds-surface-3:#e9eef6;     /* 押せる面にカーソルが乗ったとき */
 --ds-border:#e1e5ec;        /* 区切り・カードの枠 */
 --ds-border-strong:#c4c7c5; /* 入力欄・押せる面の枠 */

 /* 文字（白の上で 4.5 以上） */
 --ds-text:#1f1f1f;
 --ds-text-2:#444746;        /* 説明 */
 --ds-text-3:#5f6368;        /* 補足・メタ情報（12px以上で使う） */
 --ds-text-disabled:#9aa0a6;
 --ds-text-on-accent:#ffffff;

 /* 差し色は1つ（主な操作・選んでいる状態・リンク） */
 --ds-accent:#0b57d0;
 --ds-accent-hover:#0842a0;
 --ds-accent-pressed:#062e6f;
 --ds-accent-soft:#e8f0fe;   /* 選んだ面・主な操作の周り */
 --ds-accent-softer:#f3f7fe;
 --ds-accent-border:#a8c7fa;

 /* 意味の色（それぞれ 文字／地／枠） */
 --ds-success:#137333;--ds-success-bg:#e6f4ea;--ds-success-border:#a8dab5;
 --ds-warning:#9a5300;--ds-warning-bg:#fef7e0;--ds-warning-border:#fbd38d;
 --ds-danger:#c5221f;--ds-danger-bg:#fce8e6;--ds-danger-border:#f5b4ae;
 --ds-info:#0b57d0;--ds-info-bg:#e8f0fe;--ds-info-border:#a8c7fa;
 /* 「おすすめ」の札（琥珀）。主な操作の青とぶつけないため別の色 */
 --ds-recommend:#8a4b00;--ds-recommend-bg:#fdf1e1;--ds-recommend-border:#f3c98b;
 /* 鍵・準備中 */
 --ds-locked:#5f6368;--ds-locked-bg:#f1f3f4;

 /* ── 色：世界（キャラクター・帯） ─────────────── */
 --ds-world-navy:#0c182b;
 --ds-world-navy-2:#14213d;
 --ds-world-gold:#c9a227;
 --ds-world-gold-soft:#f0d798;
 --ds-world-ink:#ffffff;
 --ds-world-ink-2:#d9dfeb;
 /* 上のヘッダー（世界の側・2026-10-10）：紺の地に、金の細い線と、うすいガラスの面 */
 --ds-world-navy-3:#1b2c4d;
 --ds-world-gold-2:#e2c15a;      /* 紺の上で読む金の文字（コントラスト 9 以上） */
 --ds-world-line:rgba(240,215,152,.30);
 --ds-world-glass:rgba(255,255,255,.07);
 --ds-world-glass-2:rgba(255,255,255,.13);
 --ds-world-glow:0 0 10px rgba(226,193,90,.55);

 /* ダイアログの後ろ（全部そろえる。紺を少し混ぜて世界観とつなぐ） */
 --ds-scrim:rgba(12,24,43,.48);
 --ds-toast-bg:#1f2937;          /* 下に出る短い知らせ */
 --ds-actionbar-bg:rgba(255,255,255,.96); /* 下に貼り付く操作の帯 */

 /* ── 文字 ───────────────────────────── */
 --ds-font:"Google Sans","Google Sans Text",Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,Arial,sans-serif;
 --ds-font-num:"Google Sans",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;
 /* 大きさ（px）。12未満は使わない（初心者が読めない） */
 --ds-fs-xs:12px;   /* 札・補足 */
 --ds-fs-sm:13px;   /* 説明・表 */
 --ds-fs-md:15px;   /* 本文・ボタン */
 --ds-fs-lg:17px;   /* カードの見出し */
 --ds-fs-xl:21px;   /* 画面の中の節の見出し */
 --ds-fs-2xl:26px;  /* 画面の見出し（1画面に1つ） */
 --ds-fs-3xl:34px;  /* 数字の主役（費用・点数） */
 --ds-fw-regular:400;--ds-fw-medium:500;--ds-fw-bold:700;
 --ds-lh-tight:1.3;--ds-lh:1.65;--ds-lh-loose:1.85;

 /* ── 余白（4の倍数） ───────────────────── */
 --ds-sp-1:4px;--ds-sp-2:8px;--ds-sp-3:12px;--ds-sp-4:16px;--ds-sp-5:20px;
 --ds-sp-6:24px;--ds-sp-8:32px;--ds-sp-10:40px;--ds-sp-12:48px;--ds-sp-16:64px;
 --ds-gutter:16px;           /* 390px のときの左右の余白 */

 /* ── 角丸 ───────────────────────────── */
 --ds-r-sm:6px;     /* 札・小さな入力 */
 --ds-r-md:10px;    /* 入力欄・小さなカード */
 --ds-r-lg:14px;    /* カード */
 --ds-r-xl:20px;    /* 主役のカード・ダイアログ */
 --ds-r-pill:999px; /* ボタン・チップ */

 /* ── 影 ────────────────────────────── */
 --ds-shadow-1:0 1px 2px rgba(60,64,67,.12),0 1px 3px rgba(60,64,67,.08);
 --ds-shadow-2:0 2px 6px rgba(60,64,67,.12),0 6px 16px rgba(60,64,67,.08);
 --ds-shadow-3:0 12px 32px rgba(20,33,61,.18),0 2px 6px rgba(20,33,61,.10);
 --ds-shadow-primary:0 2px 6px rgba(11,87,208,.28),0 6px 16px rgba(11,87,208,.16);
 --ds-focus:0 0 0 3px rgba(11,87,208,.35);
 --ds-shadow-up:0 -4px 16px rgba(20,33,61,.06);

 /* ── 動き ───────────────────────────── */
 --ds-dur-fast:120ms;--ds-dur:200ms;--ds-dur-slow:320ms;
 --ds-ease:cubic-bezier(.2,0,0,1);
 --ds-ease-out:cubic-bezier(0,0,.2,1);

 /* ── 寸法 ───────────────────────────── */
 --ds-touch:44px;           /* 指で押す最小の高さ */
 --ds-control-h:40px;       /* 入力欄・ボタンの標準の高さ */
 --ds-control-h-lg:52px;    /* 主役のボタン */
 --ds-content-max:1200px;
 --ds-z-sticky:50;--ds-z-header:100;--ds-z-toast:1000;
}
@media (prefers-reduced-motion:reduce){
 :root{--ds-dur-fast:0ms;--ds-dur:0ms;--ds-dur-slow:0ms}
}