/* =====================================================================
   rheo for Salesforce — デザイントークン
   ---------------------------------------------------------------------
   全画面が最初に読み込む。ここには :root の変数定義以外を置かないこと
   （scripts/verify_frontend_assets.py が他のセレクタの混入を検出する）。

   値は移行前の各 HTML の :root と 1 文字も変えていない。見た目を変える
   改修（TIERO デザインシステムの適用）は分離完了後の別 PR で行う。
   対応表: docs/フロントエンド資産構成とデプロイ手順書.md §6
   ===================================================================== */
:root {
    /* ── サーフェス ── */
    --bg:                  #181a1f;
    --bg-light:            #242730;
    --bg-deep:             #111318;

    /* ── テキスト ── */
    --text:                #dde1ea;
    --text-muted:          #8a90a0;
    --text-dim:            #5a6070;

    /* ── アクセント ── */
    --accent:              #5e81ac;
    --accent-2:            #7c5cbf;
    --accent-glow:         rgba(94, 129, 172, 0.55);

    /* ── パネル ── */
    --panel-bg:            rgba(30, 33, 42, 0.45);
    --panel-bg-solid:      rgba(30, 33, 42, 0.92);
    --panel-border:        rgba(255, 255, 255, 0.055);
    --panel-border-light:  rgba(255, 255, 255, 0.10);

    /* ── ステータス ── */
    --ok:                  #81c784;
    --warn:                #ffcc80;
    --err:                 #f28b82;

    /* ── コードブロック（移行前は index.html のみが定義していた。
           未参照の画面では単に使われないだけで影響しない） ── */
    --code-bg:             #0e1015;
    --code-text:           #cdd6f4;

    /* ── ニューモーフィズムの影 ──
           --nm-flat は移行前 dashboard.html にだけ無かったが、dashboard は
           var(--nm-flat) を一度も参照していないため定義を足しても表示は変わらない。 */
    --nm-flat:             6px 6px 14px rgba(0,0,0,0.55), -4px -4px 10px rgba(255,255,255,0.07);
    --nm-inset:            inset 4px 4px 10px rgba(0,0,0,0.55), inset -3px -3px 8px rgba(255,255,255,0.06);

    /* ── タイポグラフィ ── */
    --font-sans:           "Montserrat", "Noto Sans JP", "Helvetica Neue", sans-serif;
    /* 管理系 3 画面（admin / dashboard / settings）の本文サイズ。
       index.html は移行前から無指定（＝ 16px）なので app-base.css でのみ使う。 */
    --fs-body:             14px;

    /* ── 角丸 ── */
    /* ピル型（ボタン / タブ / バッジ / トースト）。20 箇所で使う唯一の
       意味の定まった角丸なのでトークン化する。 */
    --r-pill:              999px;

    /* ── 背景 ── */
    --app-bg:              radial-gradient(ellipse 75% 65% at 50% 46%, #2d2d2d 0%, #1a1a1a 38%, #0c0c0c 100%);
    --login-bg:            radial-gradient(ellipse 90% 80% at 50% 38%, #2a2d38 0%, #20232c 45%, #14161c 100%);

    /* ── モーダルのスクリム（背面を覆う暗幕） ── */
    --scrim:               rgba(8, 9, 12, 0.65);
    --scrim-blur:          6px;

    /* ── トランジション ── */
    --t-fast:              0.18s ease;

    /* =================================================================
       レイヤー（z-index）
       -----------------------------------------------------------------
       ★ ログインオーバーレイは必ずモーダルより前面に置くこと ★
         移行前は dashboard（70/75）と settings（80）のモーダルが
         #loginOverlay（60）より前面で、モーダルを開いたままセッションが
         失効するとログイン画面が裏に隠れて操作不能になっていた。
         この順序は scripts/verify_frontend_assets.py [17] が検査する。

       50 未満は各コンポーネント内のローカルな重なり（sticky なテーブル
       ヘッダー等）に使う領域で、ここでは名前を与えない。
       ================================================================= */
    --z-drawer:            50;    /* サイドドロワー（会話履歴 / ダッシュボードのチャット） */
    --z-modal:             70;    /* モーダルのオーバーレイ */
    --z-modal-nested:      75;    /* モーダルの上に重なるモーダル（明細一覧） */
    --z-login:             90;    /* ログインオーバーレイ */
    --z-toast:            100;    /* トースト（最前面） */
}