/* 写し（直さない）。正本は projects/tsugite/design/tokens.css。node projects/tsugite/design/sync.mjs で写す */
/* ツギテ（仮称）見た目の正本 1/2 — tokens.css（デモ demo/ と本番 app/apps/web が同じこのファイルを使う・2026-10-26 社長「デモも画面を本番と、色とか全て一緒にして」）
   中身: :root の色・書体・文字の大きさ・余白・角・影・動き・押せる大きさ／ライトとダーク（端末の設定と [data-theme]）／大きい文字・かんたん表示の変数。
   部品は components.css。直すのはこの design/ だけ（demo/css/design/ と apps/web へは scripts で写し、テストで同じかを確かめる）。
   元の見出し: 2026-10-25 デザイン刷新「勝色の帳面」・16_デザイン刷新仕様
   色・書体・余白・角・影・動きは :root の変数だけで決める。直書きの色は :root の外に書かない。
   色の4系統: ブランド（勝色）／稼ぎの柱（藍・常磐・菖蒲）／意味（若竹・柿・緋）／枠と鍵（真鍮・鉄紺・牡丹）。
   勝色を面に塗るのは3か所（上の帯・主ボタン・済みの印）。枠を持つ面は4種類（AIの下書き・紹介の木・入口の見本・料金のまとめ）。
   影は4か所（トースト・営業モードの帯・入口の見本・上の帯のスクロール時）。動きは3か所（済み・AIの生成・画面の切り替え）。 */

:root {
  color-scheme: light;
  /* 面と文字 */
  --bg: #FFFFFF;
  --surface: #F5F6F8;
  --surface-2: #ECEEF2;
  --ink: #141A2A;
  --ink-2: #3A4256;
  --muted: #5E6678;
  --line: #E3E6EC;
  --line-strong: #C5CAD4;
  --line-input: #8B93A5;
  /* ブランド（勝色） */
  --brand: #1F2E5C;
  --brand-hover: #2A3C73;
  --on-brand: #FFFFFF;
  --accent: #2D4BB3;
  --accent-soft: #EBEFFA;
  --band-bg: #1F2E5C;
  --on-band: #FFFFFF;
  --on-band-2: #BFCBF5;
  --band-sample-line: rgba(255, 255, 255, .55);
  /* 稼ぎの柱 */
  --p-ref: #2D4BB3;
  --p-keep: #0B6B6B;
  --p-follow: #7A3D96;
  --p-time: #3A4256;
  /* 意味 */
  --ok: #1B7340;
  --ok-bg: #EAF5EE;
  --warn: #9A4A0C;
  --warn-bg: #FDF3EA;
  --danger: #B42318;
  --danger-bg: #FDF0EE;
  --danger-line: #EFB8B0;
  --on-danger: #FFFFFF;
  /* 枠と鍵 */
  --plan: #7A5600;
  --plan-bg: #FBF4E0;
  --plan-line: #E2C98E;
  --plan-press: #F3E6C0;
  --legal: #3B5068;
  --legal-bg: #EDF1F5;
  --legal-line: #C3CFDA;
  --legal-press: #DCE4EC;
  --guide: #A1195A;
  --guide-bg: #FBEEF4;
  --on-guide: #FFFFFF;
  /* 知らせ */
  --toast-bg: #1F2E5C;
  --on-toast: #FFFFFF;
  --toast-action: #BFCBF5;
  --toast-check: #6CCB8F;
  /* 影 */
  --shadow-pop: 0 1px 2px rgba(20, 26, 42, .08), 0 8px 24px rgba(20, 26, 42, .14);
  --shadow-show: 0 1px 2px rgba(20, 26, 42, .06), 0 12px 32px rgba(20, 26, 42, .10);
  --shadow-band: 0 1px 0 rgba(20, 26, 42, .10);
  --shadow-press: inset 0 1px 0 rgba(0, 0, 0, .18);

  /* 書体（Google Fonts。読めないときは後ろの書体で出る） */
  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "YuGothic", "Meiryo", system-ui, sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "YuGothic", "Meiryo", system-ui, sans-serif;
  --font-num: "IBM Plex Sans", "SF Pro Text", "Segoe UI", "Roboto", var(--font-body);
  --font-code: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --font: var(--font-body);
  /* 文字の大きさ（6段）。大きい文字は .app.is-large で変数だけ替える */
  --fs-cap: 0.75rem;
  --fs-sub: 0.875rem;
  --fs-body: 1rem;
  --fs-h2: 1.125rem;
  --fs-h1: 1.5rem;
  --fs-display: 2.25rem;
  /* 余白（4の倍数） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --gap: var(--sp-4);
  /* 角 */
  --r-1: 4px;
  --r-2: 8px;
  --r-round: 999px;
  --radius: var(--r-1);
  /* 高さ */
  --band-h: 48px;
  --tab-h: 64px;
  /* 23 §6-1: 押せる大きさ・親指・スマホ（色は今ある変数の別名だけ。新しい色は作らない） */
  --touch-min: 48px;
  --touch-easy: 64px;
  --fab-size: 56px;
  --fab-gap: var(--sp-4);
  --dock-h: 72px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --thumb-bottom: calc(var(--tab-h) + var(--safe-b));
  --sheet-max-h: 88vh;
  --sheet-radius: var(--r-2);
  --rec-size: 88px;
  --swipe-commit: 0.4;
  --toast-ms: 8000;
  --pad-x: clamp(12px, 4vw, 20px);
  --content-max: 600px;
  --kb-h: 0px;
  --tab-h-land: 48px;
  --band-h-land: 40px;
  --sheet-max-h-land: 92dvh;
  --st-confirm: var(--accent);
  --st-reserved: var(--accent);
  --st-sent: var(--ok);
  --st-held: var(--warn);
  --st-held-bg: var(--warn-bg);
  --st-limit: var(--plan);
  --st-limit-bg: var(--plan-bg);
  --st-lock: var(--plan);
  --st-offline: var(--ink-2);
  --st-offline-bg: var(--surface-2);
  /* 動き */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
}

/* ダーク（端末の設定。画面の色を「ライト」に固定したときは使わない） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F131C;
    --surface: #171C27;
    --surface-2: #1E2431;
    --ink: #E8EBF2;
    --ink-2: #BAC1CF;
    --muted: #8D95A6;
    --line: #232A38;
    --line-strong: #2F3747;
    --line-input: #6B7386;
    --brand: #2A3C73;
    --brand-hover: #34488A;
    --on-brand: #FFFFFF;
    --accent: #93A9EE;
    --accent-soft: #1C2541;
    --band-bg: #1A2445;
    --on-band: #E8EBF2;
    --on-band-2: #8D95A6;
    --band-sample-line: #2F3747;
    --p-ref: #93A9EE;
    --p-keep: #5CC2B8;
    --p-follow: #C9A0E0;
    --p-time: #BAC1CF;
    --ok: #6CCB8F;
    --ok-bg: #14251C;
    --warn: #F0A66B;
    --warn-bg: #2A1D12;
    --danger: #F59A8E;
    --danger-bg: #2B1517;
    --danger-line: #6A2E26;
    --on-danger: #2A0D09;
    --plan: #E5BE6A;
    --plan-bg: #2A2213;
    --plan-line: #5C4A22;
    --plan-press: #3A2F18;
    --legal: #AFC0D2;
    --legal-bg: #1A222D;
    --legal-line: #3A4A59;
    --legal-press: #243040;
    --guide: #F08BBE;
    --guide-bg: #2A1220;
    --on-guide: #2A0A1A;
    --toast-bg: #E8EBF2;
    --on-toast: #0F131C;
    --toast-action: #2D4BB3;
    --toast-check: #1B7340;
    --shadow-pop: 0 0 0 1px #2F3747, 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-show: 0 0 0 1px #2F3747;
    --shadow-band: 0 1px 0 #232A38;
    --shadow-press: inset 0 1px 0 rgba(0, 0, 0, .4);
  }
}
/* ダーク（その他の画面で「ダーク」に固定） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F131C;
  --surface: #171C27;
  --surface-2: #1E2431;
  --ink: #E8EBF2;
  --ink-2: #BAC1CF;
  --muted: #8D95A6;
  --line: #232A38;
  --line-strong: #2F3747;
  --line-input: #6B7386;
  --brand: #2A3C73;
  --brand-hover: #34488A;
  --on-brand: #FFFFFF;
  --accent: #93A9EE;
  --accent-soft: #1C2541;
  --band-bg: #1A2445;
  --on-band: #E8EBF2;
  --on-band-2: #8D95A6;
  --band-sample-line: #2F3747;
  --p-ref: #93A9EE;
  --p-keep: #5CC2B8;
  --p-follow: #C9A0E0;
  --p-time: #BAC1CF;
  --ok: #6CCB8F;
  --ok-bg: #14251C;
  --warn: #F0A66B;
  --warn-bg: #2A1D12;
  --danger: #F59A8E;
  --danger-bg: #2B1517;
  --danger-line: #6A2E26;
  --on-danger: #2A0D09;
  --plan: #E5BE6A;
  --plan-bg: #2A2213;
  --plan-line: #5C4A22;
  --plan-press: #3A2F18;
  --legal: #AFC0D2;
  --legal-bg: #1A222D;
  --legal-line: #3A4A59;
  --legal-press: #243040;
  --guide: #F08BBE;
  --guide-bg: #2A1220;
  --on-guide: #2A0A1A;
  --toast-bg: #E8EBF2;
  --on-toast: #0F131C;
  --toast-action: #2D4BB3;
  --toast-check: #1B7340;
  --shadow-pop: 0 0 0 1px #2F3747, 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-show: 0 0 0 1px #2F3747;
  --shadow-band: 0 1px 0 #232A38;
  --shadow-press: inset 0 1px 0 rgba(0, 0, 0, .4);
}

/* 大きい文字（変数だけを替える・zoom は使わない） */
.app.is-large { --fs-cap: 0.875rem; --fs-sub: 1rem; --fs-body: 1.1875rem; --fs-h2: 1.3125rem; --fs-h1: 1.75rem; --fs-display: 2.5rem; }
@media (max-width: 600px) {
  :root { --fs-display: 1.875rem; }
  .app.is-large { --fs-display: 2.125rem; }
}