/* =====================================================
   Me-Navi 管理画面 — デザイントークン（単一ソース）
   A案「Clinical Calm」 / Phase 01 基盤（タスク DY）
   配置先: public/css/admin_tokens.css
   読み込み: admin_history_style.css よりも「後」に読む
            （末尾の「旧トークン互換エイリアス」で既存 :root を上書きするため）
   方針: 色・余白・書体・角丸・最小フォントはすべてここで定義し、
         各 EJS / CSS は var(--*) 経由でのみ参照する（hex/px の直書き禁止）。
   ===================================================== */

:root {

  /* ---------- 面（背景） ---------- */
  --bg:    #F6F4EE;   /* ページ背景（紙色） */
  --paper: #FFFFFF;   /* パネル・テーブル・カード・サイドバー */

  /* ---------- 文字 ---------- */
  --ink:   #1A1A1A;   /* 本文・見出し（主文字） */
  --ink-2: #5B5B5B;   /* 副文字・説明 */
  --ink-3: #6A6A6A;   /* 補助ラベル（重要情報には使わない／コントラスト下限）。FM(2026-06-30): 視認性向上で #8D8D8D→#6A6A6A */

  /* ---------- 罫線 ---------- */
  --line:   #E7E2D5;  /* 弱い罫線（行区切り・ブロック境界） */
  --line-2: #CFC9BA;  /* 強い罫線・フォーム枠・ボタン枠 */

  /* ---------- アクセント4色（これ以外を増やさない） ---------- */
  --accent:      #1F3A2E;  --accent-soft: #E6EBE5;  /* 森林緑：主CTA・アクティブ */
  --copper:      #9C6B3F;  --copper-soft: #F2E7D8;  /* 銅金：ランキング・強調・中優先度 */
  --warn:        #B4462E;  --warn-soft:   #F5E4DC;  /* 朱：要サポート・悪化・上限・破壊的 */
  --ok:          #2F6B4B;  --ok-soft:     #E3ECE5;  /* 緑：対応済・改善 */
  --info:        #3B5C7A;  --info-soft:   #E3E9EF;  /* 藍：未測定・情報 */
  --accent-hover:#17312A;                           /* primary ボタン hover（accent 約7%暗） */

  /* ロゴ整合のブランド緑（淡色面のアンダーライン・装飾用。UIアクセントは --accent を使う） */
  --brand: #4B965A;

  /* ---------- 年代ランプ（測定結果分析ヒストグラムの積み上げ＝序数。和色「〜鼠」系5色＝小豆/枯茶/鶯茶/藍鼠/葡萄鼠。
     FN-Followup: 明度を揃え低彩度で色相を一巡させ隣接年代（特に20代/30代）を分離〔旧 森林緑単色相・FN 寒→暖スイープは
     細セグメントで明度差/色相差が潰れ判別しにくく改めた〕。彩度は抑え Clinical Calm 維持・意味色〔朱=悪化 等〕とは用途別・
     新規アクセント色は足さない。変数名は年代（意味）に紐付け色名にしない＝再調整に強い。淡色ゆえセグメント間は既存の
     borderColor/borderWidth(1px) で分離（配色のみ変更で足りる＝handoff §4）。Chart.js は getComputedStyle で読む〔EB〕・
     6桁hex 前提〔JS 側 +alpha のため〕。 ---------- */
  --age-20: #C0A5A5;  --age-30: #C0B2A5;  --age-40: #B0C0A5;  --age-50: #A5B3C0;  --age-60: #C0A5BD;

  /* ---------- 角丸 ---------- */
  --r:      2px;      /* ボタン・入力・カード・パネル・テーブル 全て 2px */
  --r-pill: 100px;    /* ピル（チップ・ステータス）のみ */

  /* ---------- 余白（4の倍数・8段階） ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;

  /* ---------- 書体 ---------- */
  /* 本文＝IBM Plex Sans JP に確定（design-owner 判断 2026-06-21・先頭ロック）。
     woff2 バイナリ（public/IBM-Plex-Sans-JP/・自ホスト）と @font-face
     （/css/ibm-plex-sans-jp.min.css）は各画面が個別に読み込む＝供給済みの画面では
     実描画も IBM Plex Sans JP になる（未供給の画面は Hiragino へフォールバック）。 */
  --font-sans:  "IBM Plex Sans JP","Hiragino Sans","Helvetica Neue",system-ui,sans-serif; /* 本文 */
  --font-serif: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;             /* 見出し・KPI数値・金額 */
  --font-mono:  "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;              /* ラベル・ID・等幅数値 */

  /* ---------- タイポスケール（老眼配慮：本文14px・最小13px） ---------- */
  --fs-micro: 13px;  /* 文字サイズ下限。ラベル・メタ・ピルもこれを下回らない */
  --fs-small: 13px;  /* キャプション・補助情報 */
  --fs-body:  14px;  /* 本文・テーブルセル */
  --fs-lede:  14px;  /* 画面説明文（lede） */
  --fs-h2:    18px;  /* パネルタイトル（serif） */
  --fs-h1:    28px;  /* 画面タイトル（serif） */
  --fs-kpi:   38px;  /* KPI 主数値（serif） */

  /* ---------- 影（原則なし。罫線で構造を作る） ---------- */
  --shadow: none;
  --focus-ring: 0 0 0 2px var(--accent);  /* :focus-visible 用（outline 併用） */

  /* ---------- レイアウト ---------- */
  --sidebar-width: 240px;  /* A案。calc() 参照箇所も追従 */
  --page-pad-x:    var(--space-7);  /* ページ左右 padding（≥1280）。1024–1279 は space-6 */
  --tap-min:       44px;   /* 最小タップ領域（老眼配慮。下限は36px） */

  /* =====================================================
     旧トークン互換エイリアス（Phase 01 の互換レイヤー）
     admin_history_style.css の :root を A案へ写像。
     これにより、まだ A案 移行していない既存画面も
     「青→森林緑・グレー→紙色」へ一斉に底上げされ、破綻しない。
     ※ 色のみ写像。サイズ系（button-height 等）は据え置き、
        各画面の本文レイアウトは Phase 02 以降で個別に移行する。
     ※ DY 方針(a)＝admin_history_style.css の :root は温存し、本ファイルを
        その「後ろ」に読み込んで上書きする（読込順序が前提）。:root 重複の
        真の単一ソース化は EA 以降（残5ファイルを style.css 依存から外した時点）。
     ===================================================== */
  --primary-color:      var(--ink);          /* 旧 #2c3e50 → 本文の主文字（濃紺ベタ廃止） */
  --secondary-color:    var(--accent);        /* 旧 #3498db（青）→ 森林緑。全画面の青アクセントを置換 */
  --secondary-hover:    var(--accent-hover);  /* 旧 #2980b9 */
  --success-color:      var(--ok);            /* 旧 #27ae60 */
  --success-hover:      #245C40;
  --warning-color:      var(--copper);        /* 旧 #f39c12 → 中優先度=銅金 */
  --warning-hover:      #855B35;
  --danger-color:       var(--warn);          /* 旧 #e74c3c */
  --danger-hover:       #97391F;
  --admin-accent-color: var(--accent);        /* 旧 #3498db */
  --admin-accent-hover: var(--accent-hover);  /* 旧 #2980b9 */
  --admin-accent-light: var(--accent-soft);   /* 旧 #E8F4FC */
  --background-color:   var(--bg);            /* 旧 #f5f6fa（青みグレー）→ 紙色 */
  --border-color:       var(--line-2);        /* 旧 #B7C1C0 */
  --text-color:         var(--ink);           /* 旧 #263C3B */
  --text-light:         var(--ink-3);         /* 旧 #7E7E7E */
  /* サイズ系は意図的に未写像（破壊的変更を避ける）：
     --sidebar-width は上で 240 に統一済。
     --font-base / --font-large / --font-xlarge / --button-height は既存値を維持し、
     各画面の A案 化（Phase 02+）でコンポーネント側の高さ・サイズに移す。 */
}

/* prefers-reduced-motion: 装飾アニメ（スケルトンのパルス等）を静止化 */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: none; }
}