/* ==========================================================================
   Pondom デザイントークン
   出典：Astra 本番デザイン v2（design/astra_v2/tokens.csv と style.css の :root）
   色・余白・フォントはすべてここに集約する。
   テンプレートやコンポーネントCSSに色コード・px値を直書きしないこと。
   ========================================================================== */

:root {

  /* --- 基本カラー（tokens.csv） --------------------------------------- */
  --accent:        #FF4B20;   /* 主CTA・見出し飾り */
  --brand-blue:    #343CFF;   /* リンク・ラベル・ピックアップ */
  --bg:            #FFF8F2;   /* ページ背景 */
  --ink:           #171717;   /* 本文・輪郭 */
  --muted:         #62616A;   /* 補助文字 */
  --line:          #E7DCD4;   /* 補助境界 */
  --surface:       #FFFFFF;   /* カード・ヘッダー・フッターの地 */
  --orange-light:  #FFE6D8;   /* 待機ステージ・テーマチップ */
  --blue-light:    #ECECFF;   /* 結果ステージ・読者層ラベル */
  --shadow:        0 6px 0 #171717;  /* 輪郭のあるCTAの影 */

  /* CTA の文字色。オレンジ地では白にする（--accent に白＝3.34:1）。
     太字18px以上で使うことを前提にしている。 */
  --on-accent:     #FFFFFF;

  /* CTA の状態（style.css で直書きされていた値を変数化）
     Astra のホバーは #FF714D だが、白文字だと 2.72:1 まで落ちるため
     明るくするのではなく少し濃くする（白文字で 3.85:1）。 */
  --accent-hover:  #F04014;
  --state-off-bg:  #E2DDDA;   /* 無効ボタンの地 */
  --state-off:     #777777;   /* 無効ボタンの文字 */
  --line-strong:   #BBBBBB;   /* 無効ボタンの枠 */

  /* --- ジャンル色 ----------------------------------------------------- */
  /* DBの genres.color と同じ値にしておく。ポンごとの箱色（pons.box_color）が
     あるときは、PonBox.mount() が要素の --genre を差し替える。 */
  --genre:         #C83282;   /* 漫画 */
  --genre-anime:   #008B87;   /* アニメ */
  --manga:         var(--genre);
  --anime:         var(--genre-anime);
  --genre-color:   var(--genre);

  /* --- 書影なしタイル（PONDOM SELECT）の4色 --------------------------- */
  /* 作品IDから決めるので、同じ作品はいつも同じ色になる */
  --cover-c0:      #343CFF;
  --cover-c1:      #FF623D;
  --cover-c2:      #FFD96D;
  --cover-c2-ink:  var(--ink);   /* c2 は地が明るいので文字を濃く */
  --cover-c3:      #343CFF;

  /* --- レアリティ（components.html の4色箱・バッジ） ------------------ */
  --silver:        #DDE5EF;
  --silver-dark:   #566C89;
  --gold:          #FFD568;
  --gold-dark:     #9A6119;
  --rainbow:       var(--brand-blue);

  /* --- ポン箱の演出（ponbox.js／ponbox.css が使う。値は ponbox_v3.html 準拠）
     箱のSVGはここの変数だけで色が決まる。

     ここに書かないものが2つある。どちらも「全段階まとめて上書きする」ための
     変数で、:root で宣言すると段階ごとの色が全部それに染まってしまうため。
       --ponbox-ribbon … リボンの色。未指定だと段階ごとの既定
                         （ノーマル #343CFF ／銀 #566C89 ／金 #9A6119）になる
       --ponbox-glow   … 光の色。未指定だと既定（#FFD568 ／銀だけ #c1d4ed）になる
       --ponbox-bg     … ステージの地。未指定だと段階ごとの淡い色になる
     全段階を1色に揃えたくなったときだけ、ここで宣言する。

     --ponbox-normal も同じ理由でここには置かない（未指定なら、その要素の
     --pb-genre＝ポンの箱色が使われる）。 */
  /* 銀・金は v3 で斜めグラデーションになった。ここで指定するのは
     グラデーションの真ん中（offset .5）の色で、明るい側・暗い側は
     ponbox.js の <linearGradient> が持っている。既定値と同じ値。 */
  --ponbox-silver:      var(--silver);   /* #DDE5EF */
  --ponbox-gold:        var(--gold);     /* #FFD568 */

  /* 虹の5色（v3。黄 → シアン → 水色 → ピンクの斜めグラデーション） */
  --ponbox-rainbow-1:   #FFF38A;
  --ponbox-rainbow-2:   #F6E66A;
  --ponbox-rainbow-3:   #28DDD8;
  --ponbox-rainbow-4:   #60B8F5;
  --ponbox-rainbow-5:   #EC63EF;

  /* --- 角丸 ----------------------------------------------------------- */
  --radius:        24px;   /* 基準カード */
  --radius-button: 16px;
  --radius-chip:   12px;   /* テーマチップ */
  --radius-tag:    30px;   /* タグチップ・共有ボタン */
  --radius-stage:  32px;   /* ポンのステージ */

  /* --- 枠線 ----------------------------------------------------------- */
  --border-card: 2px solid var(--ink);          /* ポン・主要カード */
  --border-work: 1px solid var(--line);         /* 収録作品カード */

  /* --- 余白スケール --------------------------------------------------- */
  --s1:  4px;   --s2:  8px;   --s3:  12px;  --s4:  16px;
  --s5:  20px;  --s6:  24px;  --s7:  28px;  --s8:  32px;
  --s9:  36px;  --s10: 40px;  --s11: 44px;  --s12: 48px;
  --s13: 52px;  --s14: 56px;  --s15: 60px;  --s16: 64px;

  /* --- フォント ------------------------------------------------------- */
  /* 見出しは Zen Maru Gothic 900、本文は Noto Sans JP。
     Google Fonts から読む（base.php の <link>、font-display: swap）。
     読み込み前は端末の丸ゴシック→標準ゴシックにフォールバックする。 */
  --font-heading: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-body:    'Noto Sans JP', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-base:    var(--font-body);

  /* --- レイアウト ----------------------------------------------------- */
  --w-wrap:   1100px;   /* .wrap の最大幅 */
  --pad-x:    20px;     /* .wrap の左右余白（calc(100% - 40px)） */
  --h-head:   84px;     /* ヘッダーの最小高 */
  --h-logo:   46px;     /* ヘッダーロゴの表示高 */
  --h-tap:    44px;     /* タップ領域の最小値 */
  --breakpoint: 600px;  /* 唯一の幅ブレークポイント */
}