/* tokens_ARTAGE-AI.css — ART AGE AI 用の完成トークン。アプリへは tokens.css の名前でコピーする。
   正本: ../デザイン/アプリデザイン_ARTAGE-AI.md（色）＋ ../design.md（サイズ・余白・角丸）。2026-08-28 統合生成 */
/* =========================================================================
   tokens.css — 見た目の「値」だけを供給する（★このファイルが差し替え対象）
   ------------------------------------------------------------------------
   ★正本は同じフォルダの `design.md`。あちらを直してから、ここへ写す。
   ★shell.css はこのファイルの var(--…) しか使わない。だから
     **このファイルを丸ごと差し替えれば、構造を1行も触らずに見た目だけが変わる。**
   ★ここに定義する名前は「トークン契約」（アプリ構造規格.md §2）で決まっている。
     名前を減らすと shell.css が壊れる。増やすのは自由。

   下の値は ART AGE 既定（ロゴから機械抽出・コントラスト検証済）。
   他社案件では design.md の手順でロゴから抽出し直して、この :root だけを置き換える。
   ========================================================================= */
:root {
  /* ===== ブランド（操作の色。状態の意味には使わない） =====================
     ロゴ H205 から抽出。括弧内は白文字とのコントラスト比。 */
  --brand:        #327AAE;  /* 面・ボタン地・アクティブ（白文字が乗る）4.64:1 */
  --brand-band:   #559BCE;  /* 32px以上の白文字を乗せる帯・見出し面        3.01:1 */
  --brand-strong: #2C6A96;  /* hover・押下・濃い帯                        5.82:1 */
  --brand-soft:   #D7E8F4;  /* 淡地（バッジ・選択行）                            */
  --brand-tint:   #EFF6FA;  /* 極淡地（チップ背景・ゼブラ・帯）                    */
  --brand-fg:     #2C6A96;  /* soft/tint の上に乗せる文字                 4.64:1 */
  --brand-deco:   #69A7D3;  /* 装飾専用。★文字を乗せない（コントラスト未検証）      */
  --on-brand:     #FFFFFF;  /* brand 面の上に乗る文字色                          */
  --brand-grad:   linear-gradient(180deg, var(--brand), var(--brand-strong));  /* 主ボタン地。両端とも白文字 4.5:1 以上（band は 32px 未満の文字に使えないので入れない） */

  /* ===== アクセント（別の会社／別の立場を示す識別色。状態色とは別体系） ===== */
  --accent:        #5A7E25;  /* 4.72:1 */
  --accent-band:   #74A22F;  /* 3.02:1 */
  --accent-strong: #49671E;  /* 6.48:1 */
  --accent-soft:   #E8F4D7;
  --accent-tint:   #F6FAEF;
  --accent-fg:     #557722;  /* 4.53:1 */
  --accent-deco:   #A9D369;  /* 装飾専用 */

  /* ===== グラフ配色（先頭から順に。色覚検証済み） ===== */
  --chart-1: #276EA5;
  --chart-2: #719F32;
  --chart-3: #8F2D48;
  --chart-4: #18951B;
  --chart-5: #6D45C4;
  --chart-6: #BE8B3C;
  --chart-7: #BD1F9F;
  --chart-8: #7086D2;
  --chart-seq-1: #D6E2EB;
  --chart-seq-2: #9DBED7;
  --chart-seq-3: #5E9AC9;
  --chart-seq-4: #2F75AD;
  --chart-seq-5: #194D76;

  /* ===== 状態色（意味が固定。会社が変わっても変えない） ===================== */
  --ok:      #15803D;  --ok-soft:      #DCFCE7;  /* 完了・承認・正常 */
  --warn:    #B45309;  --warn-soft:    #FEF3C7;  /* 要注意・期限間近 */
  --danger:  #B91C1C;  --danger-soft:  #FEE2E2;  /* エラー・却下・削除 */
  --on-danger: #FFFFFF;                          /* danger 面の上に乗る文字色 */
  --info:    #1D4ED8;  --info-soft:    #DBEAFE;  /* 進行中・情報 */
  --neutral: #55617A;  --neutral-soft: #F1F5F9;  /* 保留・下書き・無効 */

  /* ===== 地・面・文字・罫線 =============================================== */
  --bg:            #F6F8FB;  /* ページ地（フラット単色） */
  --surface:       #FFFFFF;  /* カード・サイド・トップバー */
  --surface-sub:   #F1F4FA;  /* テーブル見出し・淡いブロック */
  --surface-hover: #F7F8FB;  /* 行 hover */
  --border:        #E2E6EE;
  --border-strong: #D7DBE6;
  --border-control:#8C95A7;  /* 入力欄の枠（薄すぎると入力欄に見えない） */
  --ink:           #0F172A;  /* 本文 */
  --ink-sub:       #55617A;  /* 副次テキスト・ラベル */
  --ink-mute:      #616B80;  /* 補助・プレースホルダ */
  --scrim:         rgba(15,23,42,.45);  /* モーダル・ドロワーの幕 */

  /* ===== 影（3段のみ。ブランド色を混ぜない） ============================== */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px -4px rgba(15,23,42,.08);
  --shadow-lg: 0 4px 12px rgba(15,23,42,.10), 0 12px 24px -8px rgba(15,23,42,.12);

  /* ===== 書体 ============================================================ */
  --font-jp:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-num: "Inter", "SF Pro Display", -apple-system, sans-serif;

  /* ===== 文字サイズ（この表に無い値を使わない。11px未満を作らない） ======== */
  --fs-h1:      28px;  /* 画面タイトル。1画面に1つだけ */
  --fs-h2:      18px;  /* セクション見出し */
  --fs-h3:      16px;  /* カード見出し */
  --fs-body:    14px;  /* 本文・入力・ボタン（基準値） */
  --fs-sub:     13px;  /* 副次・補足 */
  --fs-label:   12px;  /* ラベル・表見出し・バッジ */
  --fs-caption: 11px;  /* キャプション・タブラベル（最小） */
  --fs-kpi:     34px;  /* KPI数値 */
  --fs-kpi-lg:  40px;  /* 大KPI（1画面の主役1つ） */

  --lh-tight: 1.3; --lh-heading: 1.4; --lh-body: 1.7;
  --tracking-title: -.01em;   /* 画面タイトルだけ締める。本文はベタ組み */

  /* ===== 余白（7段のみ） ================================================== */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;

  /* ===== 角丸（3種のみ） ================================================== */
  --r-sm: 8px;    /* バッジ・入力 */
  --r-md: 10px;   /* ボタン */
  --r-lg: 16px;   /* カード */
  --r-pill: 999px;
}

/* SPだけ縮める文字（design.md §3 の ※印） */
@media (max-width: 767px) {
  :root { --fs-h1: 22px; --fs-kpi: 28px; }
}