/* ARERUYA — 色と寸法だけ。★ここには**値しか置かない**。
 *
 * ★配色は Color.kt の値そのまま。Discordのダークに寄せた**青みを帯びた寒色グレー**で、
 *   純粋な無彩色にしないのが肝（#313338 は青がわずかに高い。この「ほんの少しの青」が
 *   画面全体を締めて見せる）。彩度はアクセント1色だけに使い、地は全部グレーで通す。
 * ★明度の段は「地がいちばん暗く、カードが少し明るい」。逆にすると沈む。
 *
 * ★このファイルにセレクタ（.card など）を書かないこと。
 *   書いた瞬間、色を変えるために部品の並びを読む羽目になる。
 */

:root {
  --ink0: #0E0F11;   /* いちばん奥 */
  --ink1: #131417;   /* 画面の地 */
  --ink2: #1D1F23;   /* カード。★地との差は詰める。開けると「板の羅列」に見える */
  --ink3: #25272C;   /* 一段浮いた面 */
  --ink4: #2B2D32;   /* さらに浮いた面（結果の枠） */
  --edge: #2E3136;   /* カードの縁。★面の明度差でなく、この線が輪郭を担う */
  --band: #212328;   /* モーダルの上下の帯 */
  --line: #3F4147;
  --line2: #4E5058;

  --t1: #F2F3F5;     /* 主文 */
  --t2: #AAB1BB;     /* 副文 */
  --t3: #838A94;     /* 添え字（時刻・タグ。読み飛ばしてよいもの） */

  --brand: #1B4A96;  /* ヘッダーのベタ。アイコンの地と同じ濃紺 */
  --accent: #5C8AD9;
  /* ★イン逃げ系アイコンの色（青緑）。荒れ＝--accent の青と分ける（2026-09-13）。
   *   ★緑（的中）・暖色（オッズ）を避けた寒色で、トンマナ（グレー×青×緑）に収める。
   *     イン逃げを荒れと見間違える対策。色を効かせるのは css/card.css のカード内だけ。 */
  --nige: #2CB5AE;
  --offtrack: #5C6068; /* ★トグルOFFの地。つまみが白なので暗いと消えかけて見える */
  --ok: #23A55A;     /* 的中・大荒れ。★通知の成功アイコンにも使う */
  --ng: #DA373C;

  /* ★★札（無料お試し・購入済み）の緑。**--ok より暗い**。
   *
   * ★別に持つ理由: --ok は通知の成功アイコン（暗い地の上のSVG）にも使う。
   *   あちらは**暗くすると逆に見えなくなる**ので、同じ色にできない。
   *   ★意味が違うものは別の値で持つ（--yen* と --ng を分けたのと同じ）。
   * ★★数値の裏取り（scratch のコントラスト計算）:
   *     いまの #23A55A … 白い字が **3.18倍**（10pxの太字には足りない。4.5倍要る）
   *     #1A7F45        … 白い字が **5.04倍** ／ カードの地から 3.27倍
   *   ★これ以上暗くすると（#126536 で 2.31倍）札が地に沈んで、
   *     何か書いてあることに気づかれなくなる。
   *   ★明るいテーマでも白の上で 5.04倍。両方で読めるので上書きは要らない。 */
  --badge-ok: #1A7F45;

  /* 荒れの段階。★同じ緑で、**荒れ度が上がるほど濃く**（2026-08-27に変えた）。
   *
   * ■ ★★以前は逆に組んでいた（薄い→鮮やか）。理由も残してある——
   *   「暗い地の上では濃い緑ほど沈むので、濃淡だけで組むと
   *     いちばん強い大荒れがいちばん目立たなくなる」。
   *   ★★これはいまも本当。実測（地 #131417 との明暗差）:
   *       小荒れ 13.63 → 中荒れ 9.85 → 大荒れ 6.09 → 激荒れ以上 4.18
   *     **段が上がるほど地に近づく**。承知のうえでこの並びにしている。
   *   ★積み上げの棒では、段は**左から順に並んでいる**ので、
   *     位置そのものが順序を伝える。濃淡は順序の補強であって、
   *     「どれが目立つか」で順序を読ませているわけではない。
   *   ★判子のほうは沈むと困る（1件ずつ見るもので、位置の手がかりが無い）。
   *     ∴ **濃さ（opacity）を段ごとに上げて**打ち消してある
   *     （css/card.css の .hanko.t1〜t4）。実測で 2.32 → 2.53 → 2.91 → 3.19 と
   *     ちゃんと上がる。★色は濃く、見え方は強く、を両立させている。
   *
   * ★明るいテーマも同じ向き（下の @media）。白の上では濃いほど強い。
   * ★荒れず（0段）は色を付けない。色が付いている＝何か起きた、と読ませる。 */
  --rough1: #BFE7CE;  /* 小荒れ 25〜40倍。★いちばん薄い */
  --rough2: #7ACF9B;  /* 中荒れ 40〜70倍 */
  --rough3: #33A867;  /* 大荒れ 70〜500倍 */
  /* ★★激荒れ（500倍〜）と極荒れ（1000倍〜）。2026-08-27に足した。
   *
   * ■ ★出る頻度（本番の実測・確定519件）: 激荒れ 1.0% ／ 極荒れ 0.4%
   *   ★積み上げの棒では 2.4px ／ 1.0px にしかならず、色の違いは読めない。
   *     ∴ **棒と色見本では2つを1つにまとめてある**（inc/stats.php の
   *     tiers_merged）。読めない区別を描くと、区切り線だけが増える。
   *   ★判子と梯子では**別のまま**。あちらは1件ずつ見るものなので、
   *     「極荒れ」と捺してあること自体に意味がある。
   *
   * ★色は --rough4 を2つで共有する。★--rough5 は判子だけが使う。
   *   ★極荒れは激荒れより更に濃く。ここが緑のいちばん深いところ。 */
  --rough4: #158A4A;  /* 激荒れ 500倍〜（5万円〜）。棒では「激荒れ以上」 */
  --rough5: #0C6B38;  /* 極荒れ 1000倍〜（10万円〜）。★いちばん濃い */

  /* 配当の色。★★境目は**荒れの段とそろえる**（2026-08-25に変えた）。
   *   以前は 7千／1万という別の刻みで、判定語（小荒れ・中荒れ・大荒れ）と
   *   配当の色が食い違っていた——「中荒れなのに赤」が起きていた。
   *   いまは 25倍／40倍／70倍。判定語の段とそのまま1対1で並ぶ。
   *
   * ★段の緑（--rough）とは**軸が違う**ので色系統も変える。
   *   緑は「どの段か」、こちらは「いくらか」。同じ色にすると2つの軸が混ざる。
   * ★★--ng（エラーの赤）と分ける。同じ値にすると、
   *   エラーの赤を調整した日に配当の色まで動く。意味が違うものは別に持つ。
   * ★黄→橙→赤と**熱くしていく**。段が上がるほど色が強くなる並びにする
   *   （緑の彩度を上げていくのと同じ考え方）。 */
  /* ★★黄は**暗く落とす**。暗い地の上では黄がいちばん明るく光るので、
   *   素の黄（#F0B429）だと**いちばん弱い小荒れがいちばん目立つ**という
   *   逆の並びになる（2026-08-25に実際そう見えた）。
   *   明るさで順序を作るため、小＝暗い黄 → 大＝明るい赤、と上げていく。 */
  /* ★★3色は**地の上での強さ（コントラスト比）が小→大で上がる**ように選んである。
   *   色相（黄→橙→赤）だけで順序を作ろうとすると崩れる——暗い地の上では
   *   黄がいちばん光るので、素の黄と素の赤を並べると
   *   **いちばん弱い小荒れがいちばん目立つ**（2026-08-25に実際そうなった）。
   *   ★橙も落としてある。落とす前は中荒れが大荒れより強く出ていた。
   *   ★数値の裏取りは scratch のコントラスト計算。3.7 → 4.2 → 5.1 の順。
   *     いちばん弱い小荒れでも 3:1 以上（19pxの太字なので読める下限）。 */
  --yen1: #9A711A;   /* 小荒れ 25倍〜。黄に寄せた橙。★落ち着いた金色まで暗く */
  --yen2: #D25F30;   /* 中荒れ 40倍〜。赤に寄せた橙 */
  --yen3: #FF4D57;   /* 大荒れ 70倍〜。赤。★いちばん強い */

  /* ★★注意書き（自慢の「お読みください」）。**暗めの黄色**。
   *
   * ★赤にしない。赤は「間違い・失敗」の色で、ここはそうではない——
   *   落ち着いて読んでほしい断りなので、黄色（注意）が合う。
   * ★★字は帯の上に白で置く。**黄色い字を地に直接置かない**——
   *   #9A711A を暗い地に置くと明暗差が3倍しか出ず、13pxでは読みにくい。
   *   ここは景品表示法の打ち消し表示なので、**読めないと意味が無い**。
   *   帯（--warn-line）の上の白なら5倍出る。 */
  --warn-line: #9A711A;   /* 帯と枠。--yen1 と同じ落ち着いた金色 */
  --warn-bg: #26210F;     /* 中の地。黄を含んだ暗い色で、地から浮かせる */
  --warn-on: #FFFFFF;     /* 帯の上に乗る字（**塗り潰した**帯の上） */
  /* ★★**透かした**帯の上に乗る字（css/card.css の .c-trial b）。
   *   ★上の --warn-on と分ける理由：帯を透かすと、下の地が混ざって
   *     **明るいテーマだけ**帯が淡くなり、白い字が沈む
   *     （暗いテーマでは逆に濃くなるので気づけない＝片側だけ壊れる）。
   *   ★暗いテーマは白のまま（透かすと帯が暗くなるので、明暗差はむしろ上がる）。
   *   ★★実測（透かし45%・カードの地に重ねて計算）:
   *       暗い側 白 on #55441F = **9.40倍**
   *       明るい側 #4A3608 on #CAB893 = **5.92倍**
   *     どちらも4.5倍を超えている。
   *   ★参考：color-mix を使えない環境は塗り潰しのまま（白 on 金＝4.42倍）。
   *     11pxの太字なので通しているが、**これ以上暗い帯にしないこと**。 */
  --warn-on-thin: #FFFFFF;

  /* 毛筆の書体（Yuji Syuku。inc/layout.php が Google Fonts から読む）。
   * ★★使うのは**ロゴと判子の2か所だけ**。同じ書体を使うから、
   *   ヘッダーの名前と結果の判子が同じ「筆」に見える。
   * ★書体名を2か所に書き写さない——片方だけ直すと、
   *   同じ筆のはずの2つが別の書体になる。
   * ★落ちてこないとき用に明朝を並べてある。読み込みを待たせない
   *   （display=swap）ので、一瞬こちらで出てから入れ替わる。 */
  --font-brush: "Yuji Syuku", "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* ★★数字・組・コードも**本文と同じ Noto Sans** にそろえる（2026-09-07）。
   *   ★もとは等幅（ui-monospace）だった。「ロゴ以外は Noto Sans」に合わせ、
   *     サイト全体を1書体で通す。桁ぞろえは font-variant-numeric: tabular-nums で担う
   *     （Noto Sans JP は等幅数字を持つ）。★毛筆（ロゴ・判子）だけは別。 */
  --font-num: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ★★読み物の1行の長さ。
   *   ★880px の枠いっぱいに文を流すと、14pxの日本語で**1行100字近く**になる。
   *     行を折り返したときに次の行頭を見失う（読み飛ばしの原因）。
   *   ★日本語は1行 40〜50字あたりがいちばん読みやすい。660px でおよそ45字。
   *   ★★これは**文にだけ**掛ける。表と数字の粒は枠いっぱいに広げる——
   *     数字は桁をそろえて見るもので、行を追うものではない。 */
  --measure: 660px;

  --edge-pad: 16px;  /* 画面端からの余白。ホームと設定でそろえる */
  --radius: 8px;     /* ★角丸は8pxで統一。既定の錠剤型を混ぜない */
}

/* 明るいテーマ。Color.kt に Lite* の値があるので入れてある（同系で明度だけ反転）。
 * ★ヘッダーの濃紺は両テーマで同じ（LiteAccent も #1B4A96）。 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink0: #E4E6E9;
    --ink1: #F2F3F5;
    --ink2: #FFFFFF;
    --ink3: #EBEDEF;
    --ink4: #E4E6E9;
    --edge: #D8DADE;
    --band: #EBEDEF;
    --line: #D8DADE;
    --line2: #C4C7CC;
    --t1: #2E3338;
    --t2: #5C6067;
    --t3: #82868C;
    --offtrack: #B5B9BF;
    --nige: #12938C;   /* ★白の上で読める濃いめの青緑 */
    /* ★明るい地では緑を落とす。暗い地用の淡い緑は白の上でほとんど読めない。
     * ★★向きは暗いテーマと**同じ**（小→極で濃くなる）。2026-08-27にそろえた。
     *   ★白の上では濃いほど強いので、こちらは色の濃さと見え方が素直に一致する。
     *   ★白との明暗差 2.0 → 3.6 → 6.6 → 9.6 → 14.1 と単調に上がる。 */
    --rough1: #86C4A1;
    --rough2: #319A5D;
    --rough3: #0A6B36;
    --rough4: #05502A;
    --rough5: #02331A;
    /* ★同じ理由で黄・橙・赤も落とす。暗い地用の明るい色は白の上で読めない。
     *   ★とくに黄は白地でほぼ消えるので、しっかり暗くする。 */
    /* ★白の上では**濃いほど強い**ので、小→大で暗くしていく（暗い地とは逆）。
     *   小荒れは薄めに置いて、いちばん弱いことを明るさでも示す。 */
    --yen1: #B0801A;
    --yen2: #C0501A;
    --yen3: #C62B31;
    /* ★明るい地では、帯は少し濃く・中の地はごく淡く。 */
    --warn-line: #8A6210;
    --warn-bg: #FDF6E4;
    --warn-on: #FFFFFF;
    /* ★★透かした帯の上は**白をやめて濃い字にする**（理由は暗い側の定義に）。 */
    --warn-on-thin: #4A3608;
  }
}
:root[data-theme="light"] {
  --ink0: #E4E6E9; --ink1: #F2F3F5; --ink2: #FFFFFF; --ink3: #EBEDEF;
  --ink4: #E4E6E9; --edge: #D8DADE; --band: #EBEDEF; --line: #D8DADE;
  --line2: #C4C7CC; --t1: #2E3338; --t2: #5C6067; --t3: #82868C;
  --offtrack: #B5B9BF; --nige: #12938C;
  --rough1: #86C4A1; --rough2: #319A5D; --rough3: #0A6B36;
  --rough4: #05502A; --rough5: #02331A;
  --yen1: #B0801A; --yen2: #C0501A; --yen3: #C62B31;
  --warn-line: #8A6210; --warn-bg: #FDF6E4; --warn-on: #FFFFFF;
  --warn-on-thin: #4A3608;
}