/* ========================================================================= tokens.css — デザイントークンの単一情報源(SSOT) ------------------------------------------------------------------------- Layer 1 の値は phase2-5-instructions.md §9 の支給版。 map.css は Layer 2 しか参照しないため、Layer 1 の命名が変わっても 書き換えるのはこのファイルのマッピングブロック1箇所で済む。 ★ このファイル以外に色の生値を書かない。 ========================================================================= */ :root { /* ======================================================================= Layer 1 — 基盤トークン（支給版・Register III / warm） ======================================================================= */ /* --- 不変層(面積×彩度の反比例則) ------------------------------------- 大きな面ほど無彩に近づく。淡色タイルの上に置く器なので、 地図そのものより静かでなければピンが立たない。 */ --c-bg: #ffffff; /* L100% chroma0 掲載先サイトの地色 */ --c-surface: #f0f0ee; /* L93.7% chroma0.8% サイドバー・カード。掲載先サイトの面色に合わせた中性グレー */ --c-surface-sunk: #ebe6dd; /* L89.4% chroma5.5% 一段沈めた面 */ --c-border: #d5d5d1; /* L82.7% chroma1.6% 章区切りの罫線のみ。 surface との明度差11ptを維持したまま色相・彩度を合わせた （対 surface 1.29:1。暖色だった変更前の組み合わせ 1.28:1 と同等） */ --c-text: #23201c; /* L12.4% chroma2.7% 対背景 16.21:1 */ --c-text-muted: #6b645a; /* L38.6% S 8.6% 対背景 5.84:1 */ /* --- 可変層 ----------------------------------------------------------- 明るさは小面積(件数・タグ・CTA・ピン)に配分する。器は静かなまま。 */ /* CTA塗り・リンク。L30.2% S39.0% で Register III の primary帯(S40-65/L32-48)を 下に外れ、Register II の帯に入る。対背景 6.17:1 で AA は満たす。 */ --c-primary: #2f6b62; /* design-lint-ignore: 支給トークン phase2-5-instructions.md §9 — クライアント確定の配色のため値を動かさない */ --c-primary-pale: #dfeae7; /* L89.6% chroma4.3% タグ背景・淡い面 */ /* 件数の数字・アクティブ状態。S62% で III の accent帯(S38-60)をわずかに上に外れる。 対背景 4.09:1 なので **14px以下の文字には使わない**（大きい数字と面の縁のみ）。 */ --c-accent: #c4622e; /* design-lint-ignore: 支給トークン phase2-5-instructions.md §9 — 同上 */ --c-focus: #2f6b62; /* フォーカスリング */ /* --- タイプスケール(正典値。再計算しない) ----------------------------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-ml: clamp(18px, calc(14.4px + 0.96vw), 24px); --text-lg: clamp(24px, calc(-2.08px + 6.96vw), 40px); --text-xl: clamp(32px, calc(23.55px + 2.25vw), 56px); --text-2xl: clamp(40px, calc(-0.99px + 10.9vw), 72px); --font-ui: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; /* --- 形・余白 ---------------------------------------------------------- */ --radius: 0; --radius-control: 2px; /* タグ・input 等の小型コントロールのみ */ --radius-pill: 9999px; /* 地図ラベルのオーバル。高さが変わっても常に半円で終端する */ --radius-surface: 8px; /* 面の角丸（パネル・地図）。掲載先サイトの意匠に合わせる */ --space-block: clamp(40px, 8vw, 80px); --space-inline: clamp(24px, 5vw, 48px); /* ======================================================================= Layer 3 — ブランド / ピン（10種） key は constants.js の BRANDS と1対1。ブランド追加はここに2行足す。 クライアント指定色(与件)に準じる扱いとし、レジスタ帯検査を免除する。 出典: phase3-instructions.md §3。 紙マップの凡例（社内で運用中）と名刺・ロゴSVGのブランドカラーから抽出し、 淡色タイル上での視認性のために明度・彩度のみ補正した確定値。 **色相はすべて元の値を維持している。** 識別は「色 × 形」の2軸で成立している（形は category が決める）。 色だけで10種を分けるのは限界を超えているため、色を変える場合は 以下の条件を崩さないこと: ・通常視覚で ΔE12未満のペアが0組 ・同一 category 内での衝突が0組 とくに nursery×digsmile / plus×ilis / nursery×habby は色相が近く、 **形状分けが機能していることが前提**になっている。 ======================================================================= */ /* --- ブランド識別色 --------------------------------------------------- サイドバーのピン図形・一覧カードの識別に使う。ピン色と同値。 **文字には使わない**（habby 3.24:1 / digsmile 3.28:1 と AA を満たさない）。 */ --brand-nursery: #B6402B; --brand-kirara: #608632; --brand-mini: #544899; --brand-plus: #2F63A7; --brand-rest: #297A4F; --brand-visit: #774389; --brand-room: #9F4170; --brand-habby: #C97B0D; --brand-ilis: #103593; --brand-digsmile:#D66D66; /* --- 地図ピン色 ------------------------------------------------------- design-lint 例外(CLAUDE.md §4 に記載)。帯検査の対象外。 全色 白に対して 3.3:1 以上（図形要素の下限3:1を満たす）。 最も低いのは habby 3.32 / digsmile 3.37。 */ --map-pin-nursery: #B6402B; /* 朱赤 対白 5.59 */ --map-pin-kirara: #608632; /* 黄緑 対白 4.24 */ --map-pin-mini: #544899; /* 紫 対白 7.60 */ --map-pin-plus: #2F63A7; /* 青 対白 6.06 */ --map-pin-rest: #297A4F; /* 濃緑 対白 5.26 */ --map-pin-visit: #774389; /* 赤紫 対白 7.12 */ --map-pin-room: #9F4170; /* ピンク 対白 6.06 */ --map-pin-habby: #C97B0D; /* 橙 対白 3.32 */ --map-pin-ilis: #103593; /* 濃紺 対白 10.75 */ --map-pin-digsmile:#D66D66; /* サーモン 対白 3.37 */ --map-pin-stroke: #ffffff; /* ピンの白フチ2px。淡色タイルからピンを切り離す */ /* ======================================================================= Layer 2 — 案件セマンティックトークン Layer 1 / 3 を var() で参照するだけ。生値を書かない。 map.css はこの層しか参照しない。 ======================================================================= */ /* --- 器 ---------------------------------------------------------------- */ --fm-page-bg: var(--c-bg); --fm-panel-bg: var(--c-surface); --fm-panel-sunk: var(--c-surface-sunk); --fm-panel-rule: var(--c-border); --fm-text: var(--c-text); --fm-text-sub: var(--c-text-muted); /* --- 操作 -------------------------------------------------------------- */ --fm-action: var(--c-primary); --fm-action-pale: var(--c-primary-pale); --fm-action-on: var(--c-bg); /* 塗りボタンの上に載る文字 */ --fm-focus-ring: var(--c-focus); --fm-count-figure: var(--c-accent); /* 該当件数の数字。大きい文字のみ */ --fm-empty-note: var(--c-text); /* 該当0件の告知。14pxなので accent は使えない */ /* --- 地図 -------------------------------------------------------------- */ --fm-map-bg: var(--c-surface); /* タイル読込前に見える面 */ --fm-label-bg: var(--c-bg); /* 地方・都道府県ラベル */ --fm-label-text: var(--c-text); --fm-label-rule: var(--c-border); --fm-label-figure: var(--c-primary); /* ラベル内の件数 */ --fm-cluster-bg: var(--c-text); /* クラスタは件数でありブランドではない */ --fm-cluster-text: var(--c-bg); --fm-pin-stroke: var(--map-pin-stroke); /* ピンを淡色タイルから浮かせる影。box-shadow ではなく filter を使うのは、 円・ひし形でも図形の輪郭に沿わせるため（phase3 §2 指定） */ --fm-pin-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3)); /* 淡色地図を後退させるフィルタ。完全なグレースケールにすると 水域と陸地の区別がつかなくなるため、彩度を少し残す */ --fm-tile-filter: saturate(20%) brightness(108%) contrast(88%); /* --- 寸法 -------------------------------------------------------------- */ /* ピンは尖りを持たない図形。図形の中心が座標に一致する（phase3 §2） */ --fm-pin-size: 28px; --fm-pin-legend: 16px; /* サイドバーに置く小さいピン図形 */ --fm-sidebar-w: 320px; --fm-gap: 16px; --fm-gap-lg: 24px; }