/* =============================================================================
   配色トークン（3画面の共通の正本）
   =============================================================================
   これは **見た目を変えないための土台** である（2026-08-20）。

   なぜ作ったか:
     index.html / nippo.html / service-items.html が、同じ配色テーマ7種を
     **それぞれ自分の <style> に持っていた**。1色変えるのに3ファイル直す状態だった。
     実測すると、テーマ定義130件のうち **105件は3画面で完全に同じ値**だった。
     その105件だけをここへ集めた。

   ⚠ 作った時点では**値を1つも変えていない**。移動しただけだった。
     tools/xss-harness/h_tokens.html が「7テーマ × 全変数」を毎回検査する。

   ⚠ 2026-08-20（2回目）に、**実測で AA に届かなかった値だけ**を動かした。
     WCAG 2.1 のコントラスト比を計算して出した数字であり、好みではない。
     色相と彩度は動かさず、**明度だけ**を、4.7:1 を満たす最小量だけ動かしてある。

       --muted        7テーマすべて 3.33〜3.65 → 4.71〜4.78
                      ふりがな・説明文・表の見出しに使う色。**共通して空いていた穴**
       --side-dim     mint 3.91 / emerald 4.40 → 4.71 / 4.75（他5テーマは元から合格）
       --accent-deep  mint 4.09 → 4.75（白文字を載せる。他6テーマは 4.90〜7.07 で合格）

     足したもの:
       --plan-ink     --plan(#8A6D3B) を --plan-soft の上に置くと 4.12 で届かない。
                      面の標識としての --plan は変えず、**文字用に1つ足した**
       --row-hover    行のホバー色。index.html に #FBF8F1（暖色）が直書きされていた。

   ⚠ 2026-08-21 に、**テーマが持つトークンを4つに絞った**（利用者の判断）。
       テーマが動かすもの   --accent / --accent-deep / --accent-soft / --lamp
       全事業所で共通       --bg / --ink / --line / --muted / --row-hover / --panel /
                            --nav-* / 状態色（--indigo / --violet / --ok / --plan / --warn）
     それまでは --bg も --ink もテーマごとに染めていたため、
     **sakura を選ぶと画面全体がピンク**になっていた（--bg #FDF5F8 / --ink #3A2430）。
     事業所の個性は「アクセントに出る」だけでよく、地と文字まで染めると落ち着きが消える。

   ⚠ --side-* （暗いサイドバーの5トークン）は**削除した**。
     外殻を明るいニュートラルにした結果、参照が0件になったため（実測）。

   ⚠ 白文字を **--accent（#15B584）** に載せると 2.63:1 で、これはトークンでは直らない。
     --accent はブランド色そのもので、濃くするとテーマの性格が変わる。
     **塗りボタンの地を --accent-deep にする**ほうで直す（index.html の .btn.primary）。

   ⚠ nippo.html の **--ink-soft は --muted と同じ値の別名**である（7テーマぶん）。
     同じ理由で AA に届いていない。nippo を刷新するときに同じ直し方をすること。

   ⚠ 残り25件は nippo.html に残してある。**同じ名前で値が違うため**である。
       --line / --ok / --plan   nippo だけ別の値（既定テーマ）
       --paper / --ink-soft / --accent-softer   nippo にしかない
     ここへ混ぜると nippo の見た目が変わる。**混ぜない。**

   読み込み順:
     <link rel="stylesheet" href="theme.css">  ← 先
     <style> ... </style>                       ← 後（各画面の固有分が勝つ）
     この順序を入れ替えると nippo の上書きが効かなくなる。

   ⚠ 部品（.card / .chip / .empty）はここに入れていない。
     3画面で**定義が違う**ので、まとめると見た目が変わる。
     統一はデザイン刷新の工程で、画面ごとに行う。
   ============================================================================= */

/* =============================================================================
   外殻のニュートラル層（2026-08-21・利用者の判断）
   =============================================================================
   ⭐ **基本UIは全事業所で共通。事業所テーマはアクセントにだけ出る。**

   それまでは --side（暗い緑）を13.5%の面積に敷き、テーマごとに色を変えていた。
   実測すると、画面に出ている緑は --side(13.5%) と --accent-deep(6.8%) の
   **どちらも暗い緑**で、ブランド色 --accent(#15B584) の面積は **0.0%** だった。
   「濃い緑が広い・明るい緑が無い」状態で、これが「地味」の正体だった。

   競合の実測（2026-08-21）
     カイポケ    地 #FFF6EB（明度96%）／CTA #E46500（明度45%・彩度100%）
     SmartHR     主ボタン #0F7F85（明度29%）／第2アクセント #FFEE11（明度53%）
     ワイズマン   #0379C4（明度39%）／#38AC7F（明度45%）／#FF8336（明度61%）
     うち        --side #1C4A3C（**明度20%・彩度45%**）を大面積に
     → 3社に共通するのは「面は明るい／暗色は小さい要素だけ」。

   ⚠ ここは**テーマで変えない**。事業所テーマごとに外殻の明暗が変わると、
     「桜だから画面全体がピンク」になり、業務ソフトとしての落ち着きが消える。
     テーマが動かすのは --accent / --accent-deep / --accent-soft / --lamp だけにする。

   ⚠ 第2アクセント（橙・黄など）は**足さない**（利用者の判断）。
     競合にあるからという理由で色を増やさない。
     まず現在のミント系を正しく使って、どこまで明るくできるかを見る。
   ============================================================================= */
:root{
  --nav-bg:    #FFFFFF;   /* 外殻の面。**暗い塊をやめる** */
  --nav-ink:   #20324B;   /* 外殻の本文。ほぼ黒・わずかに寒色（2026-09-07 見本に合わせて青みへ） */
  --nav-muted: #586B80;   /* 外殻の副次。白に対して AA を満たす値にしてある（5.6:1） */
  --nav-line:  #E5E9F0;   /* 外殻の境界。面を分けるのは影ではなく線 */
  --nav-hover: #F5F7FB;   /* 外殻のホバー。ごく薄いニュートラル */
}

/* ---- 既定（2026-09-07: ブルー。DB の値は "mint" のまま） ----
   ⚠ 利用者が選んだ見本「01 / EDITORIAL」（Codex ui-preview/options/a.html の最終層）の値。
     組織の theme 列は CHECK で 7 値に固定されているので、**新しい名前は足さず**、
     既定（属性なし＝DB の "mint"）の中身をこの青に置き換えた。他の 6 テーマは不変。
     以前の既定はミント緑（--accent #15B584 / --accent-deep #0C835E / --accent-soft #DFF5EC / --lamp 95,227,180）。
   ⚠ 地・文字・罫線（--bg / --ink / --line / --muted）は全テーマ共通のニュートラル層。
     見本に合わせて青みのある灰へ寄せた。AA: --muted #586B80 / 白 = 5.6:1、--accent-deep #2B4FCC / 白 = 6.3:1。 */
:root{
  --accent: #315BE6;
  --accent-deep: #2B4FCC;
  --accent-soft: #EDF2FF;
  --bg: #F5F7FB;
  --indigo: #3D5A80;
  --indigo-soft: #E7EDF5;
  --ink: #20324B;
  --lamp: 49,91,230;
  --lift: 0 1px 2px rgba(32,55,77,.06), 0 4px 14px rgba(32,55,77,.05);
  --lift-lg: 0 2px 6px rgba(32,55,77,.08), 0 12px 32px rgba(32,55,77,.07);
  --line: #DCE4EF;
  --muted: #586B80;
  --ok: #2F6F7A;
  --ok-soft: #E2EFF2;
  --panel: #FFFFFF;
  --plan: #8A6D3B;
  --plan-ink: #7A5F31;
  --plan-soft: #F3ECDC;
  /* ---- 型階層（2026-08-21）----------------------------------------
     ⚠ **画面側で font-size に生の px を書かない。**必ずこの8段から選ぶ。

     入れた理由。実測で index.html の画面用 font-size は **22種類**あり、
     9.5 / 10.5 / 11.5 / 12.5 / 13.5 / 14.5 / 15.5px が混ざっていた。
     13.5px と 14px と 15px が同じ表の中に同居していた。
     人はこのズレを言葉にできないが「安っぽい」として確実に感じ取る。
     目分量で少しずつ動かした跡が残っていたということ。

     和文UIなので小さい側は 1px 刻みで良い。潰したのは **0.5px の半端**。 */
  --fs-1: 11px;   /* 最小。ロール・注記・タグ・件数 */
  --fs-2: 12px;   /* ふりがな・副次 */
  --fs-3: 13px;   /* チップ・表の見出し・小ボタン・リンク */
  --fs-4: 14px;   /* 本文の既定 */
  --fs-5: 15px;   /* ナビ・ボタン・表の本文 */
  --fs-6: 16px;   /* 氏名・カード見出し・入力欄（iOSの自動ズーム回避も兼ねる） */
  --fs-7: 20px;   /* 画面見出し・モーダル見出し */
  --fs-8: 26px;   /* 数値の大表示 */

  /* ---- 角丸（2026-08-21）--------------------------------------------
     ⚠ **画面側で border-radius に生の px を書かない。**
     実測で 2/4/5/6/7/8/9/10/12px の **9種類**が混在していた。
     9px と 10px が隣り合っていた。差が見えないのにそろってもいない、
     いちばん雑に見える状態。3種に畳む。

     50% は「円」であって角丸の段階ではないので、この表には入れない。 */
  --r-sm: 8px;      /* 小さい操作子・タグ・入力欄 */
  --r-md: 12px;     /* カード・モーダル・ボタン・行 */
  --r-full: 999px;  /* ピル・チップ */

  /* 既存の呼び名。3画面が使っているので残す。値は --r-md にそろえた（14→12px） */
  --radius: var(--r-md);
  --row-hover: #F7F9FC;
  --violet: #6B4E8E;
  --violet-soft: #EFE7F3;
  --warn: #A33D3D;
  --warn-soft: #F6E3E3;
}

/* ---- emerald ---- */
html[data-theme="emerald"]{
  --accent: #0EA06B;
  --accent-deep: #0B7E55;
  --accent-soft: #E3F5EC;
  --lamp: 63,217,160;
}

/* ---- indigo ---- */
html[data-theme="indigo"]{
  --accent: #4361EE;
  --accent-deep: #2F4BC9;
  --accent-soft: #E5EAFD;
  --lamp: 124,147,245;
}

/* ---- wisteria ---- */
html[data-theme="wisteria"]{
  --accent: #8B5CF6;
  --accent-deep: #7043D8;
  --accent-soft: #EEE6FD;
  --lamp: 183,155,245;
}

/* ---- coral ---- */
html[data-theme="coral"]{
  --accent: #E85D3A;
  --accent-deep: #C4472A;
  --accent-soft: #FCE7DF;
  --lamp: 255,158,128;
}

/* ---- charcoal ---- */
html[data-theme="charcoal"]{
  --accent: #A8862B;
  --accent-deep: #8A6D1D;
  --accent-soft: #F5EDD8;
  --lamp: 223,192,122;
}

/* ---- sakura ---- */
html[data-theme="sakura"]{
  --accent: #DB4F86;
  --accent-deep: #B93A6C;
  --accent-soft: #FBE4EE;
  --lamp: 247,162,192;
}


/* =============================================================================
   押せるチップの押下フィードバック（063・3画面の共通）
   =============================================================================
   ⚠ **`.chip` そのものを共通化してはいけない。** 3画面で別物である（実測）。

     nippo.html         `.chip` は **<button type="button">** ×3箇所
                        サービス選択・よく使う時間帯。押せる
     index.html         `.chip` は **<span>** ×27箇所すべて。予定/完了/キャンセル等の
                        **状態バッジ**で、押せない。**触ってはいけない**
     service-items.html `.chip` / `.pill` は **<button>**。絞り込み。押せる

   だから当てるのは `button.chip` / `button.pill` だけにしてある。
   セレクタが要素で絞るので、index.html のバッジには**構造的に当たらない**。

   なぜ要るか（2026-08-27 の指摘）:
     「よく使う時間帯」のチップを押すと時刻は入るが、**押した感が無い。**
     入ったことに気づかず二度押しする。押下フィードバックは装飾ではなく、
     操作が届いたことを返す仕組みである。

   ⚠ 色だけに依存させない。**形（縮み）と影**も同時に動かす。
   ⚠ 動きを減らす設定の利用者には、**縮みを出さない**（下の @media）。
     色と影は残るので、フィードバックそのものは消えない。
   ⚠ `.chip` の min-height:44px（タップ領域）はここで触らない。 */
button.chip, button.pill{
  cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease, box-shadow 120ms ease,
             background-color 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color:transparent;
}
button.chip:active, button.pill:active{
  transform:scale(.96);
  filter:brightness(.94);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.16);
}
/* キーボードで辿れること。nippo.html にはチップの focus 表示が無かった（実測）。 */
button.chip:focus-visible, button.pill:focus-visible{
  outline:2px solid var(--accent-deep);
  outline-offset:2px;
}
/* 押した直後の残光。
   「よく使う時間帯」のように**押しても選択状態が残らない**チップへ、
   JS が短時間だけ付ける（サービス選択チップは元から .on が残るので付けない）。 */
button.chip.just-pressed, button.pill.just-pressed{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-deep);
}

@media (prefers-reduced-motion: reduce){
  button.chip, button.pill{ transition:none }
  /* 縮みは出さない。色と影だけで「押した」を返す。 */
  button.chip:active, button.pill:active{
    transform:none;
    filter:brightness(.90);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.22);
  }
}