/* palette.css — デザイントークンの唯一の正本 (= 色 §4a-1・§4a-7・§4a-10 + font/角丸/z §4a-5・§4a-6 / 汎用開発ガイド)
 *
 * 🔴 このファイル以外に色を書かない。新しい色が要るときは、その場に #hex を書かず
 *    ここにトークンを足して var(--token) で参照する。
 *    強制: tests/test_no_hardcoded_colors.py (= palette.css の外の色リテラルを機械検知)
 *    font-family も同様: 末尾の --font-* を参照 (= tests/test_no_hardcoded_fonts.py が機械検知)。
 *
 * 🔴 全11ページ (SPA / LP / 認証 / 法務 / 運営コンソール) がこれを <link> する唯一の共通CSS。
 *    だから色だけでなく font/角丸/z-index の非色トークンもここに集約する (= 2026-07-19 / base.css から移設)。
 *    base.css を読むのは index.html だけ = 非色トークンを base.css に置くと残り10ページで未定義に落ちる。
 *
 * 使い方 (= 4 通りだけ / 全て実ブラウザ Chrome 148 で実測):
 *   CSS / HTML の style       … color: var(--text)
 *   JS のインラインstyle       … el.style.background = 'var(--accent)'   (文字列のまま効く)
 *   SVG の presentation attr  … el.setAttribute('fill', 'var(--mint)')   (効く)
 *   canvas / Chart.js         … token('--accent')  ← ここだけ var() が **黙って無視され黒**になる
 *                                (static/js/lib/palette.js)
 *   半透明                     … color-mix(in srgb, var(--accent) 5%, transparent)
 *
 * 設計 (= 2026-07-17 マッド化 → 2026-07-25 リブランド「ペトロール(濃ティール) × テラコッタ」):
 *   - ブランド刷新は OKLCH の L/C を保存した色相回転 (緑 h162°→ペトロール h193°) = AA/マッドの質感を保存。
 *     生成器: scratchpad の palette_v3.py (AA 12ペア / テラコッタvs状態色 dE / チャートCVD を機械検証)。
 *   - **OKLCH で導出** (= 知覚的に一様)。HSL の S は知覚彩度でないため一律に掛けると
 *     「マッドになる色とならない色」が混在する (実測: danger -44% / warn -17%)。
 *   - **ブランド色相で統一**: 中立色 (面/枠/文字) に純粋な無彩色を使わず、ブランドと
 *     同じ色相の微かな chroma を持たせる。ライトもダークも同色相。
 *   - **状態色は chroma を全色 同一に揃える** (= 削減率でなく着地点を揃える = 同じ家族に見える)。
 *   - **白に近い面は L を沈める** (= 彩度を落としても何も起きないため。これが無いとマッドに感じない)。
 *   - **淡いティントは chroma を cap** (= 係数で削ると警告の淡い背景がページ背景に溶ける / 実測)。
 *   - 文字は 13:1 / 7:1 / 4.6:1 の ramp (= 「最低 4.5」だと 3 段の階層が潰れる)。
 *   - **全 28 ペアが WCAG AA 適合**。現行で既に落ちていた 5 ペアもここで是正した
 *     (--text3 2.32:1 / --warn-text 4.49:1 / --green 4.43:1 等)。
 *   生成器: scratchpad の palette_v2.py (= 値は全て再計算で再現できる / 憶測値ゼロ)
 *
 * 2026 トレンドの不採用 (= 2026-07-26 洗練リフレッシュ時の判断 / 蒸し返し防止):
 *   glassmorphism (backdrop blur 多用) = 高密度テーブルで可読性低下・数年で陳腐化 /
 *   大型ドロップシャドウ (blur30px+・alpha0.15+ の常設影) = 影の意味論と矛盾 (--shadow-hero は hero-card 1箇所の例外) /
 *   バウンス系モーション = 業務UIで信頼感を削る / カードレス大改造・本文15px化 = 情報密度を下げるため禁止。
 */

/* ═══ ライト (= アプリ本体 / LP / 認証ページ) ═══ */
:root {

  /* 面 (surface) — 白基調で洗練 (= 2026-07-18 / オーナー「白と各色で洗練されたデザイン」)
     🔴 純白カード + 中立グレーの背景 (= 2026-08-02 オーナー「裏の裏の色は緑でいいのか」で
        緑がかりを撤去 / ブランド色は意味のある場所 [トーンゾーン・アクセント・状態色] だけに置き、
        ベース面は無彩色に寄せて色の配置を一段洗練)。 */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface2: #f0f2f4;
  --surface3: #e9edf0;

  /* 枠線 (border) — 軽いヘアライン */
  --border: #e2e7e7;
  --border2: #ced4d4;
  --border-control: #909696;

  /* 文字 (text) — 13:1 / 7:1 / 4.6:1 の ramp (= 白面で張り直し / 全 AA 適合) */
  --text: #242e2e;
  --text2: #4b5757;
  --text3: #677272;
  --text-inverse: #ffffff;

  /* ブランドのペトロール (= 濃ティール / 2026-07-25 リブランド。トークン名 accent/mint は歴史的名称のまま = 参照480箇所の churn 回避 / 値だけ差替) */
  --accent: #003d3c;
  --accent-dark: #002b2a;
  --accent-lift: #3a7473;
  --accent-lift2: #649796;
  --accent-bg: #cbeceb;
  --accent-bg2: #b3dedc;
  --mint: #9bc7ca;
  --mint-deep: #72a3a4;
  --mint-soft: #dff4f3;

  /* ブランドのグラデーション (ロゴ / ヒーロー / CTA帯) */
  --brand-1: #82bebc;
  --brand-2: #4e8988;
  --brand-3: #125251;

  /* 相対ブランド: テラコッタ (= 2026-07-25 リブランド「ペトロール × テラコッタ」の 2 色目)
     🔴 使いどころは 10% アクセント (LP の CTA / プレミアム表示 / ヒーローのバッジ) に限定。
        状態色でない (= danger 赤・warn 琥珀と紛れないよう彩度を一段低い土色に / dE 検証済)。 */
  --brand2: #9e6945;
  --brand2-dark: #885530;
  --brand2-bg: #ffe7d7;
  --brand2-text: #92592f;
  --brand2-border: #dfb396;
  --on-dark-brand2: #eeae82;

  /* ロゴ ワードマーク用グラデ (= 2026-07-20 / オーナー「タイトルが薄い・インパクトに欠ける」)
     🔴 濃→中の範囲に留める。旧: brand-3→accent-lift2→brand-1 と薄側へ流れ、白背景で
        後半が溶けていた (brand-1 は白と 1.9:1)。最薄でも accent-lift (白と 5.3:1) = 常に読める。
     9 ページ (サイドバー/LP/認証/法務/料金) が共有 = ここ 1 箇所で調整。 */
  --logo-gradient: linear-gradient(96deg, var(--accent) 0%, var(--brand-3) 55%, var(--accent-lift) 100%);

  /* 影 (= 合成値) — 用途は浮遊レイヤー専用 (dropdown/モーダル/ツールチップ/sticky)。
     常設カードの立面は 1px border のみで定義し影を付けない (= 2026-07-26 影の意味論 / --shadow-hero は hero-card 1箇所の例外) */
  --shadow-color: #0e1818;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #0e1818 5%, transparent), 0 1px 3px color-mix(in srgb, #0e1818 4%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, #0e1818 7%, transparent), 0 4px 12px color-mix(in srgb, #0e1818 5%, transparent);
  --shadow-lg: 0 4px 12px color-mix(in srgb, #0e1818 10%, transparent), 0 10px 30px color-mix(in srgb, #0e1818 8%, transparent);
  --shadow-hero: 0 10px 40px color-mix(in srgb, #0e1818 28%, transparent), 0 2px 8px color-mix(in srgb, #0e1818 14%, transparent);

  /* 暗い島の面 (= LP の CTA帯 / ダーク背景セクション / 旧 --dark / --dark2) */
  --island: #0d1616;
  --island2: #1b2222;
  --island-border: #303a3a;

  /* 状態色 4 色 (危険/警告/情報/成功) = **彩度・明度を揃えてバランス** (= 2026-07-19)
     旧は success(緑)だけ C0.067 で突出して鈍く、赤黄青と並ぶと緑が弱かった → C を 0.118〜0.140 に
     収束(色相のみで区別)。danger を僅かに最強に保ちアラート階層は維持。全て白文字4.5:1 / tint文字4.6:1。 */
  /* 状態: 危険 */
  --danger: #c0554c;
  --danger-text: #ac433c;
  --danger-bg: #ffded8;
  --danger-border: #f8a59b;

  /* 状態: 警告 */
  --warn: #a96707;
  --warn-text: #985800;
  --warn-bg: #ffe4c7;
  --warn-border: #e5b37e;

  /* 状態: 情報 (= シグナル色) */
  --info: #257bba;
  --info-text: #0d6caa;
  --info-bg: #cfeeff;
  --info-border: #8cc4f4;

  /* 状態: 成功 */
  --success: #208757;
  --success-text: #04794b;
  --success-bg: #d0f4de;
  --success-border: #8ecfa9;

  /* 中立バッジ */
  --neutral: #5a6a69;
  --neutral-bg: #e1eaea;

  /* 損益 (P&L) 専用 = お金の正負だけに使う (= 2026-07-19 / オーナー「プラス青はどうか」)
     🔴 なぜ緑でなく **青** か:
       ①**緑をブランド専用に解放**する。従来 緑は「ブランド + 成功 + グラフ1本目 + 利益プラス」の
         4役を兼務し、"緑=良い" の信号が効かなくなっていた。
       ②**色覚多様性に強い**。実測 (Machado 2009 / severity 1.0):
         現行 緑×赤 = P型 dE 18.4 / D型 34.8 → **青×赤 = P型 41.1 / D型 55.1** (2.2倍の分離)。
         損益は読み違えると実害が出るので、ここは可読性を優先する。
       ③**赤字=赤** は日本の会計慣行と一致。緑/赤は日本・中台の株価では意味が逆転する曖昧さがある。
     ⚠ --info(情報)/--danger(危険) とは **別トークン**にする (= 用途が違うので将来別々に調整できる)。
        赤は danger と同族の値だが、意味が違うので名前を分ける。全て AA 適合 (面/背景で 5.19〜6.23)。
     使う場所: 利益・損益・含み損益・差引など「金額の正負」のみ。在庫ステータス/アラート/グラフ系列には使わない。 */
  --pnl-pos: #35648f;
  --pnl-neg: #ac433c;
  --pnl-pos-bg: #dbe6f1;   /* = KPIカード等の淡色背景 (上に --pnl-pos の数値で 4.92:1) */
  --pnl-neg-bg: #ffded8;   /* = 同上 (上に --pnl-neg で 4.61:1) */

  /* 暗い島の上の文字 (= ヒーローカード / CTA帯 / 濃緑ボタン) */
  --on-dark: #f1f6f6;
  --on-dark2: #b4c1c1;
  --on-dark3: #899594;
  --on-dark-danger: #dfb1ac;
  --on-dark-warn: #d4b998;
  --on-dark-info: #a1c2df;
  --on-dark-success: #9fc9b3;
  /* 暗い島の上の損益 (= ヒーローカードの利益表示 / 島 #0f1612 上で 8.03:1 と 7.58:1) */
  --on-dark-pnl-pos: #7fb0e0;
  --on-dark-pnl-neg: #e98e84;

  /* チャート系列 (= グラフのカテゴリ色 / 汎用開発ガイド §15-11)
     🔴 グラフの系列は **色相** で区別する (= 緑の濃淡でなく)。マッド化で低彩度にしても
        色覚多様性(CVD)で潰れないよう **色相 + 明度の両方を散らす** (= Okabe-Ito の原理)。
        検証済: 隣接系列の CVD 分離 dE 12.2 (dataviz 目標 ≥12) / 緑基調を先頭に。
     JS(canvas/Chart.js)からは token('--chart-1') / 塗りは tokenAlpha('--chart-1',0.5)。
     ライト/ダーク両面のカード上でコントラスト検証済 = 1 定義で両テーマに効く。 */
  --chart-1: #198583;   /* ペトロール (ブランド) */
  --chart-2: #73a3d5;   /* 青 */
  --chart-3: #a87d46;   /* 琥珀 */
  --chart-4: #904e46;   /* 煉瓦 */
  --chart-5: #7bc4a0;   /* 緑 (= 旧chart-1の色相 / ブランドのティール化で1⇄5の色相を入替) */
  --chart-6: #a17bb2;   /* 藤 */
  /* 線用の薄い版 (= オーナー要望「グラフのラインも薄い色に」 / 同色相・明度↑彩度↓) */
  --chart-1-line: #73b2b0;
  --chart-2-line: #9fc2e7;
  --chart-3-line: #d2b18a;
  --chart-4-line: #b7847c;
  --chart-5-line: #98cbb1;
  --chart-6-line: #ceb1db;
  /* グラフの目盛り線(グリッド) = ごく薄いヘアライン (= オーナー要望「メモリの線を薄く」)
     🔴 canvas は var()/color-mix() を解決しない → JS からは token('--chart-grid') で hex 解決して渡す。
        面(surface #f2f7f4)のすぐ上の淡いグレー = データを邪魔しない。lineWidth も 0.5。 */
  --chart-grid: #e5ecec;
  /* グラフの軸 = しっかり黒 (= 2026-07-20 オーナー「軸は黒にしてほしい・黒もしっかり使って」)。
     役割分担: グリッド=薄く消える / 軸(目盛り数字・軸線)=黒で締める (= 古典的で読みやすい構成)。
     旧: 目盛りが緑(--success-text)や Chart.js 既定グレー #666 でぼやけていた。白面で 16.6:1。 */
  --chart-axis: #12191a;

  /* sequential 5段 + diverging 3点 (= 2026-07-26 / デジタル庁 政策ダッシュボードのデザイン文法を採用
     = dev-standards optional/dashboard-design / docs/claude/optional/dashboard-design/README.md)
     seq = 順序データ・地図の濃淡用 (= DA Blue ランプの L/C 構造をペトロール h193° で再生成 /
           識別目的の categorical --chart-1..6 とは役割が別 = §15-11「ordinal は sequential が正」)
     div = 正負の両方向データ用 (= 両端は PnL 青/赤の色相 × DA の淡ティント重み / 中心は無彩色) */
  --chart-seq-1: #006066;
  --chart-seq-2: #00989a;
  --chart-seq-3: #00b7b5;
  --chart-seq-4: #aee2e0;
  --chart-seq-5: #e2f5f4;

  /* 面ティントの濃淡 3 段 (= 2026-08-04 / オーナー「濃い薄いは色の濃淡として入れたほうがいい」)。
     淡 → 濃 の順に 1 → 3。実測の相対輝度 0.9524 / 0.9260 / 0.8937 で単調。
     ダッシュボードの面の階層 = ページ上部ウォッシュ → tone-3 (コマンド行) → tone-2 (今日やること /
     月間目標レール) → 白カード → hero-card (唯一のダーク面)。
     **新規・改修の面ティントはこの 3 段を使う** (= 既存の散在 color-mix は改修のついでに段階移行)。
     console テーマは --mint-soft / --surface が再マップされるので自動追従 (= 再定義しない)。 */
  --tone-1: color-mix(in srgb, var(--mint-soft) 35%, var(--surface));
  --tone-2: color-mix(in srgb, var(--mint-soft) 55%, var(--surface));
  --tone-3: color-mix(in srgb, var(--mint-soft) 80%, var(--surface));
  --chart-div-pos: #bbdaf9;   /* プラス側 (= --pnl-pos の色相) */
  --chart-div-mid: #e6e6e6;
  --chart-div-neg: #ffbcb4;   /* マイナス側 (= --pnl-neg の色相) */

  /* ═══ 色でないデザイントークン (= font / 角丸 / z-index / 汎用開発ガイド §4a-5・§4a-6) ═══
     🔴 2026-07-19 に base.css から palette.css へ集約 (= オーナー「管理コンソールを基準に合わせる」)。
        理由: palette.css は **全11ページ (SPA / LP / 認証 / 法務 / 運営コンソール) が読む唯一の共通CSS**。
        旧: これらは base.css 専有だったが base.css を読むのは index.html だけ → 残り10ページ
        (login / signup / landing / pricing / legal 各種 / provider / ai_console 等) で
        radius / font / z のトークンが全て未定義に落ち、角丸0px・serif化・z-index無効になっていた。
        palette.css に集約 = 全ページで解決 (= トークンの単一正本を色から全デザイントークンへ拡張)。
        テーマ非依存なので light :root にのみ定義 (= ダーク :root[data-theme=console] は上書き不要・継承)。 */

  /* フォント (= font-family を直書きしない / 実測で monospace が 9 綴りに分裂していたため統一)
     フォントの *読み込み* (self-host / @font-face) は別 (= ここは family の参照名 / lint: test_no_hardcoded_fonts.py)。 */
  /* 2026-07-25 リブランドで欧文を Manrope 1 書体に統一 (= 旧 Inter + Space Grotesk の 2 書体混在を解消)。
     書体を減らし weight (400-800) で階層を作るのが「洗練」の定石。和文 Noto Sans JP と等幅は不変。 */
  --font-sans: 'Manrope','Noto Sans JP','Hiragino Kaku Gothic ProN','YuGothic','Yu Gothic',sans-serif;
  --font-display: 'Manrope','Noto Sans JP',sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 角丸 */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;   /* 2026-07-26: 16→14 (= shadcn/Linear 相場のカード角丸へ / 全カード面が追従) */
  --radius-pill: 999px;   /* = 丸ピル (バッジ/トグル) */
  --radius-circle: 50%;   /* = 真円 (アバター/ドット) */

  /* モーション (= 2026-07-26 新設 / 散在する 0.1s〜0.32s と野良 bezier の正本)
     新規 transition は必ずこのトークン + プロパティ明示列挙 (transition: all 禁止)。
     バウンス/スプリング系 (overshoot bezier) は業務UIでは使わない。 */
  --dur-fast: 120ms;    /* hover / 色変化 */
  --dur-base: 200ms;    /* パネル・モーダルの出現 */
  --dur-slow: 320ms;    /* プログレスバー等の大きい変化 */
  --ease-out: cubic-bezier(0, 0, 0.38, 0.9);   /* 入場・状態変化の既定 */
  --ease-in: cubic-bezier(0.2, 0, 1, 0.9);     /* 退場用 */

  /* z-index の段階 (= マジックナンバーをやめ、重なり順を名前で表す / レイヤリング事故防止)
     🔴 値は現状の実値に一致 = 移行は視覚変化ゼロ。グローバルに重なる層だけトークン化し、
        局所 z-index(1/2/10/20) と微調整値(401/249 等) は据置 (汎用開発ガイド §23-3)。 */
  --z-sticky: 50;        /* = sticky ヘッダ / テーブル見出し */
  --z-nav: 100;          /* = サイドバー */
  --z-dropdown: 200;     /* = ポップオーバー / メニュー / 詳細モーダル */
  --z-fab: 250;          /* = 右下 FAB */
  --z-bottomnav: 300;    /* = モバイル ボトムナビ */
  --z-overlay: 400;      /* = モーダル overlay (= ボトムナビ/FAB より上) */
  --z-backdrop: 1000;    /* = 全画面バックドロップ (= 設定パネル等) */
  --z-cmdk: 9000;        /* = コマンドパレット */
  --z-toast: 9998;       /* = トースト / 進捗スタック (= モーダルより上) */
  --z-max: 9999;         /* = 最前面 (= ドラッグ中 / 単発トースト) */
}

/* ═══ ダーク (= 運営コンソール / AI-OCRコンソール / 管理者ログイン) ═══
 * 使い方: <html data-theme="console">
 * 🔴 現行は **青寄りのダーク** (#0f141b h≈250) だったが、緑ベース統一のため
 *    ブランドと同じ緑相へ寄せた (= 同じ製品に見える)。
 */
:root[data-theme="console"] {

  /* 面 (surface) */
  --bg: #0d1616;
  --surface: #1b2222;
  --surface2: #242d2d;
  --surface3: #151e1e;

  /* 枠線 (border) — 半透明白 (= surface 階段のどの面に置いても自動で馴染む / 2026-07-26)
     11%白 ≈ 旧 #303a3a 相当 (bg #0d1616 上での見え方はほぼ同一) */
  --border: color-mix(in srgb, #ffffff 11%, transparent);
  --border2: color-mix(in srgb, #ffffff 18%, transparent);
  --border-control: color-mix(in srgb, #ffffff 32%, transparent);

  /* 文字 (text) — 13:1 / 7:1 / 4.6:1 の ramp */
  --text: #cddcdb;
  --text2: #95a3a2;
  --text3: #758281;
  --text-inverse: #0d1616;

  /* ブランドのペトロール (= 濃ティール / 2026-07-25 リブランド。トークン名 accent/mint は歴史的名称のまま = 参照480箇所の churn 回避 / 値だけ差替) */
  --accent: #69a5a3;
  --accent-dark: #45807f;
  --accent-lift: #87bdbb;
  --accent-lift2: #aad4d3;
  --accent-bg: #0d3231;
  --accent-bg2: #1a4241;
  --mint-deep: #669798;
  --mint-soft: #142726;

  /* 影 (= 合成値) — 用途は浮遊レイヤー専用 (dropdown/モーダル/ツールチップ/sticky)。
     常設カードの立面は 1px border のみで定義し影を付けない (= 2026-07-26 影の意味論 / --shadow-hero は hero-card 1箇所の例外) */
  --shadow-color: #000101;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #000101 5%, transparent), 0 1px 3px color-mix(in srgb, #000101 4%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, #000101 7%, transparent), 0 4px 12px color-mix(in srgb, #000101 5%, transparent);
  --shadow-lg: 0 4px 12px color-mix(in srgb, #000101 10%, transparent), 0 10px 30px color-mix(in srgb, #000101 8%, transparent);
  --shadow-hero: 0 10px 40px color-mix(in srgb, #000101 28%, transparent), 0 2px 8px color-mix(in srgb, #000101 14%, transparent);

  /* 状態: 危険 */
  --danger: #d87a70;
  --danger-text: #e98e84;
  --danger-bg: #39211f;
  --danger-border: #66423f;

  /* 状態: 警告 */
  --warn: #c48b4c;
  --warn-text: #d59e64;
  --warn-bg: #342613;
  --warn-border: #5e492e;

  /* 状態: 情報 (= シグナル色 / 発色) */
  --info: #5c9fd6;
  --info-text: #73b1e6;
  --info-bg: #182b3a;
  --info-border: #355067;

  /* 状態: 成功 */
  --success: #5eab80;
  --success-text: #75bd94;
  --success-bg: #172f23;
  --success-border: #335645;

  /* 中立バッジ */
  --neutral: #839493;
  --neutral-bg: #242a2a;

  /* 損益 (P&L) 専用 = 暗い面用に明るく (= AA 適合 5.82〜8.03 / P型 dE 41.1・D型 52.3) */
  --pnl-pos: #7fb0e0;
  --pnl-neg: #e98e84;
  --pnl-pos-bg: #1c2a36;   /* = KPIカード等の淡色背景 (上に --pnl-pos で 6.41:1) */
  --pnl-neg-bg: #39211f;   /* = 同上 (上に --pnl-neg で 6.14:1) */

  /* グラフの目盛り線 (= ダーク面のすぐ上の淡い線) */
  --chart-grid: #293232;
  /* グラフの軸 (= ダーク面では明るい文字色で「しっかり」/ ライトの黒と同じ役割) */
  --chart-axis: #cddcdb;
}