/* ほどあい(程合い) — design tokens (2026-08-03 新規ビルド)
   Concept: 「受信解像度」。離れて暮らす親への踏み込みの深さを、映像/音声/状態のうち
   どれだけ細かい情報を受け取るかという4段階の解像度として可視化する。
   A=カメラ(高解像度・映像そのもの) > B=人感/開閉センサー(中解像度・出来事の記録)
   > C=家電型IoT(低解像度・使用有無の推定) > D=スマート電球/プラグ(最小解像度・在/不在の気配のみ)。
   意匠は「解像度メーター」= 段が上がるほど格子が細かくなるモザイク/ピクセルグリッド。
   Palette: スレートミスト青灰(base) x 埃紫(dust violet, 距離・介在の控えめな副アクセント)
   x 灯オクル(lantern ochre, 受信/警告・主役アクセント)。
   台帳照合(2026-08-03): base(青灰系, H210°台)は既出の生成り紙地/濃紺/近黒シネマ/
   藍×朱/深緑×朱赤のいずれの帯とも不一致。差し色(紫+オクル)の組は既出サイトと
   ベース・差し色の両方一致なし。
   2026-08-03是正: 初回確定値#c9d3dc(実測HSL 206°/21%/82.5%)は「中間トーン(L55-80)
   で彩度を持つ色を地色に使う」という差別化の核が実現できていなかったため、
   色相・彩度を保ったままL=57-69の帯へ明度を落とした。ink/ink-soft/dust-deep/
   lantern-deepは深めたbase上でのAA(本文4.5:1・大字/非文字3:1)を実測して調整済み
   (詳細値は各行のコメント参照)。ダークモードの値(下部@media)は変更していない。
   Typography: 見出し=Zen Kaku Gothic New(角ゴシック、ポートフォリオ内この用途で初採用)、
   本文=Noto Sans JP、解像度の段数値・ラベル=JetBrains Mono(等幅、ポートフォリオ内未使用)。
   丸ゴシックや明朝は「解像度・受信」という機械的な世界観に合わないため排除。 */
:root {
  /* -- color: スレートミスト青灰(base/paper) -- 2026-08-03是正: 実測HSL(206,21,82.5)で
     「中間トーン(L55-80)で彩度を持つ色を地色に使う」帯の外に出ていたため明度を落として
     帯の中心へ入れ直した。色相・彩度の狙いは変えていない。 */
  --color-base:         #8fa1b3; /* H207 S19 L63 */
  --color-base-2:       #9fb0c0; /* H209 S21 L69 (浮いた面) */
  --color-base-3:       #7d90a3; /* H210 S17 L57 */
  --color-base-deepest: #435160; /* H212 S18 L32 — カード罫線の非文字コントラスト3:1を
                                    確保するため、単純なL落としの帯より一段深くしている */

  /* -- color: インク(ink, structural) --
     --color-ink は本文の文字色トークンでライト/ダーク両モードで反転する。
     --color-panel は常設パネル(受信解像度メーター本体・診断・footer等)の固定ダーク
     背景トークンで、ダークモードでも反転させない。
     2026-08-03是正: base系を中間トーンへ深めたことで、旧ink-soft/ink-faintは
     base/base-2上でAA(4.5:1)未達になったため実測の上で暗く調整した。 */
  --color-ink:       #1b2430; /* base比5.9:1、旧値からわずかに調整 */
  --color-ink-2:     #171d26;
  --color-ink-soft:  #303740; /* base比4.53:1 / base-2比5.41:1 / scrim比7.4:1 */
  --color-ink-faint: #303740; /* 旧値はink-softとの明度差2.7ptしかなくAA未達だった。
                                  深いbase上で両者を独立に成立させる余地が無いため、
                                  ink-softと同値にしてAAを優先(階層はコンテキストで表現)。 */
  --color-ink-text:  #eef1f4;
  --color-panel:     #1a2029;
  --color-panel-2:   #12161d;
  --color-label-on-panel: #a9b4c0;

  /* -- color: 埃紫(dust violet) — 是正2: 第2の主色として面・状態にも実効させる。
     文字色として使う--color-dust-deepは深いbase上でAA未達だったため実測の上で
     暗くした(意味役割: 解像度・踏み込みの深さ = 段が深いほど濃い紫)。 */
  --color-dust:        #7d6a95;
  --color-dust-deep:   #30283e; /* base比5.28:1 / base-2比6.3:1 / scrim比8.6:1(旧#4c3f61は3.6台で未達) */
  --color-dust-bright: #a996bd;
  --color-dust-dim:    #e4dfeb;

  /* -- color: 灯オクル(lantern ochre) — 受信/注意喚起アクセント(選択状態・CTA専任) -- */
  --color-lantern:      #c98a3f;
  --color-lantern-deep: #473115; /* base比4.61:1 / base-2比5.5:1(旧#825a26は2.3台で未達) */
  --color-lantern-bright: #e3ac6c;
  --color-lantern-dim:  #f3e2cc;

  --color-focus: var(--color-dust-deep);

  /* 読み物の地(scrim): body全面の粒子ノイズ+目盛り罫線が本文を横切る帯で強く出すぎる
     問題を避けるため、読み物カラムの背後だけ柄を弱めた半透明の地色を敷く。
     2026-08-03是正: baseの色相を保った上でbaseより明るい「ヴェール」として再定義
     (ink-soft比7.4:1を確保。base自体を読み物の地にすると本文がAA未達になるため)。 */
  --color-scrim: rgba(194, 204, 214, 0.94);

  /* -- fonts -- */
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-label: "JetBrains Mono", "Noto Sans JP", monospace;

  /* -- type scale -- */
  --text-display:   clamp(2.2rem, 1.1rem + 4.8vw, 4.2rem);
  --text-display-s: clamp(1.7rem, 1.1rem + 2vw, 2.3rem);
  --text-4xl: 2.05rem;
  --text-2xl: 1.42rem;
  --text-xl: 1.14rem;
  --text-lg: 1.04rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.74rem;

  /* -- spacing (4pt) -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --rule-hair: 1px;
  --rule-thick: 2px;

  --header-offset: 96px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-base:         #1b212a;
    --color-base-2:       #232a34;
    --color-base-3:       #2d3540;
    --color-base-deepest: #4a5563;
    --color-ink:           #e6eaee;
    --color-ink-soft:      #c3cbd5;
    --color-ink-faint:     #a4aeba;
    --color-ink-text:      #e6eaee;
    --color-dust-deep:     #b9a8d4; /* base比7.41:1 — ライト#30283eはダーク地#1b212a上で1.16:1のため、dust-brightと同様に明るい紫へ */
    --color-dust-bright:   #c3b3d8;
    --color-lantern-bright: #f0c58f;
    --color-scrim: rgba(23, 27, 33, 0.84);

    color-scheme: dark;
  }
}