/* ============================================================
共通デザイントークン
ThinkBeauty／Prime の全アプリで読み込む、色・余白・形の共通定義。
■ これは何か
これまで9つのアプリがそれぞれ独自に :root を定義していて、
「本文色」を指す名前だけで --text と --ink の2系統、
「主色」は --accent / --primary / --brand の3系統に分かれていた。
同じ役割のボタンがアプリごとに違う色・違う大きさで出ていたのを、
ここ1か所にまとめる。
■ 使い方
各アプリの public/ にこのファイルを置き、自前のスタイルより前に読む。
会社ごとの色は で切り替える。
thinkbeauty（既定）／ prime ／ personal
■ 更新のしかた
原本は C:\Users\keisu\共通デザイン\tokens.css。
直したら 配布する.ps1 を実行して各アプリへ配る。
各アプリの public/tokens.css を直接編集しないこと（次の配布で消える）。
============================================================ */
:root {
/* ---- 面 ---- */
--bg: #f6f5f3; /* 画面の地 */
--card: #ffffff; /* カード・表の地 */
--card-2: #faf9f7; /* 一段沈めた地（表の見出しなど） */
--line: #e3e0db; /* 罫線・枠 */
--line-strong: #cfc9c0; /* 区切りを強めたいとき */
/* ---- 文字 ---- */
--text: #2a2724; /* 本文 */
--muted: #6f6860; /* 補足・ラベル */
--faint: #9a9289; /* さらに弱い注記 */
/* ---- 主色（会社ごとに下で上書き） ---- */
--accent: #8a6f4e;
--accent-strong: #755c3f; /* 押したとき・強調 */
--accent-soft: #f0e9df; /* 帯・選択中の背景 */
--accent-text: #ffffff; /* 主色の上に乗る文字 */
/* ---- 意味を持つ色 ---- */
--good: #2f7d5a; /* 達成・増加・正常 */
--bad: #b4483c; /* 未達・減少・異常 */
--warn: #8d6718; /* 注意 */
--good-soft: #e3efe8;
--bad-soft: #f6e6e2;
--warn-soft: #f6eedb;
/* ---- 形 ---- */
--radius: 8px; /* 既定。ボタン・入力・カード */
--radius-lg: 12px; /* 大きい面 */
--radius-sm: 4px; /* 小さなタグ・チップ */
--radius-pill: 999px; /* 丸いバッジ */
--shadow: 0 1px 3px rgba(42, 39, 36, .08);
/* ---- 余白（4pxの倍数で揃える） ---- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
/* ---- 文字 ----
--fs-base は「そのアプリの本文の大きさ」。
毎日使うポータルは大きめ、表が主体のアプリは詰めたいので、
ここだけは各アプリ側で上書きしてよい唯一のトークンにしている。
他のサイズは --fs-base から派生させるので、1か所変えれば全体が揃う。 */
--fs-base: 14px;
--fs-sm: calc(var(--fs-base) - 1px); /* 表の中・補足 */
--fs-xs: calc(var(--fs-base) - 2px); /* ラベル・注記 */
--fs-lg: calc(var(--fs-base) + 2px); /* 小見出し */
--fs-xl: calc(var(--fs-base) + 6px); /* 見出し */
--lh: 1.6;
--font: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
--font-num: "Segoe UI", "Consolas", monospace; /* 数字を縦に揃えたいとき */
}
/* ---- 会社ごとの主色 ---- */
/* ThinkBeauty（既定）… サロンに合わせた落ち着いた茶 */
:root,
[data-brand="thinkbeauty"] {
--accent: #8a6f4e;
--accent-strong: #755c3f;
--accent-soft: #f0e9df;
}
/* Prime … 事業会社らしい紺 */
[data-brand="prime"] {
--accent: #33526f;
--accent-strong: #27415a;
--accent-soft: #e6ecf3;
--bg: #f4f5f7;
--card-2: #f8f9fb;
--line: #dfe2e7;
--line-strong: #c7ccd4;
--text: #23282e;
--muted: #656d77;
--faint: #8f97a1;
}
/* 個人資産 … 経理・資産管理向けの緑 */
[data-brand="personal"] {
--accent: #3f6b52;
--accent-strong: #325742;
--accent-soft: #e6efe9;
--bg: #f5f6f5;
--card-2: #fafbfa;
--line: #e0e3e0;
--line-strong: #c8ccc8;
--text: #252926;
--muted: #67706a;
--faint: #929a94;
}
/* ============================================================
旧いクラス名との橋渡し
各アプリが独自に付けていた名前を、上のトークンに向ける。
画面を書き換えなくても色が揃うようにするための互換定義で、
新しく書くところでは上のトークンを直接使う。
============================================================ */
:root {
--ink: var(--text); /* 統合資産管理・不動産・金融資産 */
--sub: var(--muted); /* 不動産・金融資産 */
--primary: var(--accent); /* 資金繰り・ローン */
--primary-d: var(--accent-strong); /* 資金繰り・ローン */
--brand: var(--accent); /* 金融資産 */
--brand-d: var(--accent-strong); /* 金融資産 */
--accent-d: var(--accent-strong); /* 不動産 */
--accent-dark: var(--accent-strong); /* 売掛金 */
--accent-light: var(--accent-soft); /* 歩合 */
--border: var(--line); /* 歩合 */
--ok: var(--good); /* 資金繰り・ローン */
--pos: var(--good); /* 不動産・金融資産 */
--danger: var(--bad); /* 資金繰り・ローン */
--neg: var(--bad); /* 不動産・金融資産 */
}