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

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

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

@layer theme {

  :root {
    /* ---- 色：アクセント（クラブカラー） ------------------------------------
       公式サイトの cerezo-pink。根拠と可読性の検証は DESIGN.md を参照 */
    --accent: #DA005C;              /* cerezo-pink。白文字で 5.08（AA） */
    --accent-soft: #FFF0F6;         /* ピンク文字を載せる淡い面。4.61（AA） */
    --accent-line: #F7C8DC;         /* 公式サイトの淡ピンク。罫線・離脱期間の面 */
    /* --accent-ink: #ffffff;  ピンク面の上の文字。既定のまま

       注意: 公式の淡ピンク #FFC7DE にピンク文字を載せると 3.50 しかない。
       小さいバッジの文字色には使えないので、面は上の #FFF0F6 に留める */

    /* ---- 色：文字 --------------------------------------------------------
       --ink: #1c1f23;
       --ink-mid: #565e68;
       --ink-weak: #8b939d; */

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

    /* ---- 色：トップバー（アプリバー） --------------------------------------
       公式サイトの cerezo-dark-navy。cerezo-navy（#1E2380）ではなく濃い側を使う。
       #1E2380 だと選択中タブのピンクの下線との対比が 2.57 しかなく、いまどの
       ページにいるのか分かりにくいため（#0C114A なら 3.46）。DESIGN.md 参照 */
    --nav-bg: #0C114A;              /* cerezo-dark-navy */
    --nav-ink: #CDCEE3;             /* 紺に合わせて青みを持たせる。11.33（AAA） */
    --nav-ink-weak: #9AA0C4;        /* 6.86（AA） */
    /* --nav-ink-strong: #ffffff;  ブランド名・選択中のタブ。17.58（AAA） */
    /* --nav-hover: rgba(255, 255, 255, 0.08); */
    --nav-border: rgba(255, 255, 255, 0.14);  /* 紺地では境目が沈むので少し上げる */

    /* ---- 色：濃色の面 -----------------------------------------------------
       本文の中の濃い帯（週次グリッドの週見出しなど）。バーより一段明るい
       cerezo-navy を当て、最上部のバーと役割を分ける */
    --surface-dark: #1E2380;        /* cerezo-navy。白文字で 13.07（AAA） */
    /* --surface-dark-ink: #ffffff; */

    /* ---- 色：状態 --------------------------------------------------------
       --ok / --ok-bg / --warn / --warn-bg / --warn-line
       --danger / --danger-bg / --danger-line */

    /* ---- 書体 ------------------------------------------------------------
       --font: …;              本文の書体
       --mono: …;              数値・コード
       --font-size: 14px;      本文
       --font-size-sm: 13px;   テーブル・フォーム
       --font-size-xs: 11.5px; ラベル・補助
       --line-height: 1.65;
       --heading-weight: 700; */

    /* ---- 形 --------------------------------------------------------------
       --radius: 8px;          カード・パネル
       --radius-sm: 6px;       ボタン・入力欄
       --radius-pill: 999px;   チップ・バッジ */

    /* ---- 密度・寸法 ------------------------------------------------------
       画面を詰めたい/ゆったりさせたいときはここ

       注意: 密度のトークンはコアが 900px / 600px の段で詰め直している。
       theme レイヤーは必ず勝つため、ここで上書きすると狭い画面での詰めが
       効かなくなる。上書きするなら、このファイルにもメディアクエリを書くこと
       （配色の上書きにこの問題はない）
       --appbar-height: 56px;      トップバーの高さ
       --tab-padding-x: 14px;      タブの左右余白（タブの密度）
       --menu-width: 240px;        アカウントメニューの幅
       --content-padding: 24px;
       --cell-padding-y: 9px;      テーブル行の高さ
       --cell-padding-x: 12px;
       --control-padding-y: 7px;   ボタン・入力欄
       --control-padding-x: 15px; */
  }

  /* ---- 個別の上書きが必要になったらここに書く --------------------------------
     例: トップバーの下端だけクラブカラーの帯にする

     .appbar { border-bottom: 2px solid var(--accent); }
  */

}