/* ============================================================================
   SMBC TOKYO SOLUA Portal - テーマ（案件固有）
   ============================================================================
   コア（portal_core/static/css/style.css）は編集しないこと。
   見た目の調整はすべてこのファイルで行う。

   カスケードレイヤーは core < feature < theme の順で、theme が最後に来る。
   **詳細度に関係なく、このファイルの指定が必ず勝つ**ため、
   `.btn` のような弱いセレクタのままコアの見た目を上書きできる。

   調整の3段階:
     1. トークンの上書き    … 下の :root を書き換える。これだけで印象は大きく変わる
     2. 任意の CSS を追加   … このファイルに普通に書けばよい（theme レイヤー）
     3. テンプレートの差し替え … webapp/templates/ にコアと同名の .html を置くと
                              そちらが優先される（例: base.html でレイアウトごと変更）

   色の根拠（2026-09-02 に公式サイト https://www.smbc.co.jp/solua/ から採取）:
     #004831  ロゴ（assets/svgs/logo.svg）の深緑。CSS 側は #00452D でほぼ同色
     #C4D700  ロゴマーク（assets/svgs/logo_mark.svg）のライム
   チームのキャッチコピーは「わたしたちは、光になる。」で、ライムがその"光"に当たる。
   ========================================================================== */

@layer theme {

  :root {
    /* ---- 色：アクセント（チームカラー） ------------------------------------
       深緑を主、ライムを従にする。ライムは面積を持たせると視線を奪いすぎるので、
       トップバーの下端の帯だけに使う（下の個別指定を参照）。

       コントラスト比はすべて実測値（WCAG）。本文サイズは 4.5:1 以上が要件 */
    --accent: #004831;              /* ロゴの深緑。白文字で 10.65（AA） */
    --accent-soft: #EAF3EE;         /* 深緑の文字を載せる淡い面。9.41（AA） */
    --accent-line: #C3DACE;         /* 罫線・選択中の枠。文字は載せない */
    /* --accent-ink: #ffffff;  深緑の面の上の文字。既定のまま（10.65）

       注意: ライム #C4D700 に白文字は 1.61 しかなく、白背景にライムの文字も
       1.61 で読めない。**ライムを文字色にも文字の下地にも使わないこと。**
       濃い文字（#1c1f23）を載せるなら 10.29 で足りるが、面を張ると
       画面全体が黄緑に寄るため、いまは帯（装飾）に限っている */

    /* ---- 色：トップバー ---------------------------------------------------
       既定の黒に近いグレーではなく、チームカラーの深緑にする。
       白のブランド名・選択中タブが 10.65、既定のグレー文字も 6.74 で AA */
    --nav-bg: #004831;
    --nav-hover: rgba(255, 255, 255, 0.10);
    --nav-border: rgba(255, 255, 255, 0.14);

    /* ---- 色：文字 --------------------------------------------------------
       コアの既定のまま（白背景で --ink 15.8 / --ink-mid 6.7 / --ink-weak 3.2）。
       --ink-weak は本文には使わず、ラベル・補助にとどめる運用もコアと同じ
       --ink: #1c1f23;
       --ink-mid: #565e68;
       --ink-weak: #8b939d; */

    /* ---- 色：面 ----------------------------------------------------------
       --bg: #f5f6f8;          ページ背景
       --surface: #ffffff;     カード・テーブルの面
       --line: #e2e5ea;        罫線
       --line-soft: #eef0f3;   薄い罫線
       --surface-muted: #fafbfc; テーブル見出し */

    /* ---- 密度・寸法 ------------------------------------------------------
       上書きするとコアのレスポンシブ（900px / 600px）の詰めが効かなくなる。
       変えるならメディアクエリもこのファイルに書くこと
       --content-padding: 24px;
       --cell-padding-y: 9px;
       --cell-padding-x: 12px;
       --control-padding-y: 7px;
       --control-padding-x: 15px; */
  }

  /* ---- トップバーの下端をライムの帯にする ------------------------------------
     深緑の面にライムの線で 6.63。文字を載せないので装飾として成立する。
     チームカラー2色を、面積を取り合わせずに両方見せるための置き方 */
  .appbar { border-bottom: 3px solid #C4D700; }

}