/* ui-spec §9.2-9.5 デザイントークン
   禁止: 紫・バイオレット系 / グラデーション / 絵文字 / 同型カードの3分割グリッド */
:root {
  color-scheme: light;

  --ink:        #1b1d1f;
  --ink-2:      #4e5257;
  /* --ink-3 は広告開示・出典・確認日・「記載を確認できず」に使う色。
     このサイトで最も誠実さを担う文字が、最も読みにくい色だった。
     旧値 #7b8085 は白地で 3.99:1 と WCAG AA（4.5:1）を下回っていたため、
     色相を保ったまま、全背景で 4.5:1 を満たす最小の暗さまで下げた。
     実測: 白 5.38 / --bg-2 4.94 / --bg-3 4.56 / --accent-bg 4.75 */
  --ink-3:      #666b70;
  --bg:         #ffffff;
  --bg-2:       #f6f5f3;
  --bg-3:       #edecea;
  --line:       #dedbd7;
  --line-2:     #bfbbb6;

  --accent:     #16385c;
  --accent-ink: #ffffff;
  --accent-hov: #0f2941;
  --accent-bg:  #eef1f5;
  --hero-bg:    #f2f5f8;   /* ヒーローの面。白より一段沈め、主役の表を白で浮かせる */
  --accent-2:   #1d4471;   /* 濃色面の中の一段明るい面 */

  --caution:    #7a4b1f;
  --ok:         #2f5d3a;

  /* 開示の状態を表す色。
     ★赤を使わない。赤は「悪い」と読まれる。
       このサイトが測っているのは開示の有無だけで、
       開示していないことが悪いという意味ではない（/index の注記と同じこと）。
       色だけに意味を持たせないよう、記号（●◐○—）も併せて出す（WCAG 1.4.1）。 */
  --st-open:    #2f5d3a;   /* 開示あり */
  --st-part:    #7a4b1f;   /* 一部のみ */
  --st-closed:  #4e5257;   /* 非公開と明示。事務所が決めて出している＝情報がある */
  --st-none:    #666b70;   /* 記載を確認できず */

  /* 比較表の列グループ。順位ではなく「かたまり」を示す帯。
     同系統の明度差にとどめ、群ごとの優劣に見えないようにする。 */
  --grp-cost:        #16385c;
  --grp-exit:        #2f5d3a;
  --grp-identity:    #14504b;   /* 青緑。紫系は §9.1 で禁止 */
  --grp-deliverable: #7a4b1f;
  --grp-contact:     #4e5257;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* 角丸は4段階で止める。場所ごとに決めると、それだけで素人の作りに見える */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 8px;
  --r-3: 14px;
  --r-pill: 999px;

  /* 影は2段階だけ。濃い影はアプリの見た目になる。ここは読み物である */
  --sh-1: 0 1px 2px rgba(27, 29, 31, .05);
  --sh-2: 0 2px 10px rgba(27, 29, 31, .07), 0 1px 2px rgba(27, 29, 31, .04);

  /* 文字の階層。px を覚えるのではなく、役割で呼ぶ */
  --fs-display: clamp(38px, 2rem + 2.4vw, 60px);   /* 統計の数字・大型CTA */
  --fs-h1:      clamp(26px, 1.5rem + 0.9vw, 34px);
  --fs-h2:      clamp(19px, 1.15rem + 0.4vw, 24px);
  --fs-h3:      17px;
  --fs-lead:    clamp(16.5px, 1rem + 0.25vw, 18px);
  --fs-body:    clamp(16px, 1rem + 0.1vw, 17px);
  --fs-cap:     13px;
  --fs-micro:   12.5px;   /* 下限。これ未満は使わない（README §1-8） */

  /* 固定ヘッダの高さ。アンカーの着地位置がこれに依存する。
     ★ここを変えたら、必ず #g-exit などで着地を目視すること。 */
  --header-h: 57px;

  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", system-ui, sans-serif;
}