/* 設計トークン。色・角丸・影の値はここだけに書く。
   各コンポーネントが 16 進数を直書きし始めると、配色を変えるたびに
   全ファイルを grep して回ることになる —— 実際この配色変更でそれをやった。

   2026-08-30 改版：design/「Kawaii 首屏方向.dc.html」の 2a（首屏）と
   5a（首屏以下 L2）の実値をそのまま持つ。近い既存トークンへ丸めない ——
   丸めた時点で「還元」ではなく「翻訳」になる。
   例外はレトロ機の筐体（game.css）。あれは「机の上の物体」を描いた絵であって
   サイトの配色体系の一部ではないので、樹脂や液晶の色は個別に持つ。 */
:root {
  /* 面 */
  --page: #FBF6E8;          /* ページ地（5a 内容区の地）*/
  --surface: #FFFDF7;       /* カード（5a / 2a 共通）*/
  --soft: #F6E7C6;          /* 淡い面。キーキャップ、注記、バッジの地 */
  --well: #4A3826;          /* 沈んだ面。選択中の主タブなど */
  --footer-bg: #FFF8E8;     /* フッター帯（2a / 5a とも同値）*/

  /* 首屏の舞台（2a）。上が壁、56% から下が木の机 */
  --sky-top: #FBF3DF;
  --sky-bottom: #F6E9C9;
  --desk-top: #DBA76B;
  --desk-bottom: #C89058;
  --desk-line: #A9773F;     /* 机の縁と板の継ぎ目 */
  --console-face: #F6E7C6;  /* 遊技機の筐体面 */

  /* 文字 */
  --ink: #4A3826;           /* 主文字（暖い焦茶。純黒は使わない）*/
  --sub: #5C4A38;           /* 本文 */
  --muted: #8A755C;         /* 補助・注記 */
  --faint: #B99C6B;         /* 最も淡い注記（「▲ 下へスクロール ▲」など）*/

  /* 線 —— 2 種類あることが要点。
     太い方（--stroke）が輪郭を描き、細い方（--line）が中を仕切る。
     この 2 本立てが「物としての箱」を成立させている */
  --stroke: #4A3826;        /* 輪郭。既定 2px で引く */
  --stroke-w: 2px;
  --line: #EADFC8;          /* 中の仕切り（破線 2px dashed もこの色）*/
  --line-soft: #EADFC8;
  --slot-line: #C8B89A;     /* 空きスロットの破線（コレクション枠）*/

  /* 強調 */
  --accent: #C05A2E;        /* リンク、下線、「もっと見る ›」*/
  --accent-hover: #A44A24;
  --accent-weak: #F6E7C6;

  /* 行動喚起。木の机の上で最も強い暖色なので、視線が必ず最初にここへ落ちる */
  --cta: #F08C2E;
  --cta-edge: #4A3826;      /* 実体のある影（0 4px 0）。輪郭と同色で「押せる物」に見せる */
  --cta-hover: #DD7A1C;

  /* ブランド。og 図のピコ（赤帽子の白い生き物）から取る */
  --brand-red: #E35A4B;     /* 帽子・現在地タブ・PLAY 札 */
  --brand-cheek: #F2A7B6;   /* ほお */
  --brand-body: #FFFDF7;    /* からだ */

  /* 状態の三色。講座ページの判定札・図版の印・吹き出しが共通で使う。
     成立（緑）／不成立（赤）／いま押す番（橙）。
     ⚠ 2026-08-30 の改版でも原値を保つ —— ここは配色ではなく教学の記号で、
     可愛くするために意味の色を動かすと、図と本文の対応が読めなくなる */
  --ok-bg: #E8F4EC;   --ok-line: #BFDCC8;   --ok-ink: #33613F;
  --ng-bg: #FCEEE9;   --ng-line: #F0C9BA;   --ng-ink: #9A4227;
  --now-bg: #FFF7EB;  --now-line: #F2D6AE;  --now-ink: #8A5312;
  --now-edge: #E8C49A;      /* 実体のある影。--cta-edge の淡い版 */

  /* 詳解の本文の行幅。本文 16px で 1 行 56 字。日本のテトリス解説サイト 2 本の実測に合わせた
     （shiwehi: 16px / 910px / 57 字、gareki: 16px / 700px / 44 字）。

     px で持つ理由：em は「その要素自身の字号」に対して解かれるので、
     字号の違う要素（表 14px、注記 11.5px）に同じ 60em を書くと
     840px・690px と別の幅になり、同じ節に 3 つの版面幅が並ぶ

     ⚠ 2026-08-30 の改版でも動かさない（L3 の赤線）*/
  --measure: 780px;

  /* ミノの色 —— 淡い塗り＋濃い輪郭の 2 段持ち。
     2a の盤は 1 マスが「塗り＋2px の輪郭＋角丸 5px」で描かれる。
     canvas は game/constants.js の COLORS / EDGES が持つので、
     図版（SVG なので JS を読めない）はここから取る。両方直すこと ——
     図の緑と盤の緑が別物になると、置き場所の図が読み合わせに使えなくなる */
  --mino-i: #9FDBE3;  --mino-i-edge: #2E8FA0;
  --mino-o: #F4D488;  --mino-o-edge: #C08F1F;
  --mino-t: #C9A8E8;  --mino-t-edge: #7C4FB0;
  --mino-s: #A8DB9B;  --mino-s-edge: #4E9440;
  --mino-z: #F2A28F;  --mino-z-edge: #C23D2E;
  --mino-j: #9FB9EE;  --mino-j-edge: #3B63B4;
  --mino-l: #F4BE8B;  --mino-l-edge: #C06E1F;

  /* ブランドの七色帯（框の上端）。og 図の下辺にある色帯をそのまま持つ。
     ⚠ 上のミノ淡色とは別物 —— 帯は彩度の高い原色でないと 8px の細帯で色が死ぬ */
  --strip-1: #46B5C4;  --strip-2: #E8B93F;  --strip-3: #9D6BCE;  --strip-4: #6BBF59;
  --strip-5: #E35A4B;  --strip-6: #4A7FD4;  --strip-7: #E8913F;

  /* 意味を持つ色 */
  --green: #4E9440;         /* ON 状態 */
  --you: #C05A2E;           /* 自分の記録 */
  --gold: #F4D488;
  --silver: #DCD5C6;
  --bronze: #E6B78F;

  /* 形 —— 2a / 5a の実値。丸ピルが既定で、角丸は「箱の大きさ」で 3 段 */
  --radius: 10px;           /* 小さな面。講座ページの 6px→10px もこれ */
  --radius-inner: 14px;     /* 節の内側で中身を割る小カード */
  --radius-card: 18px;      /* カード */
  --radius-shell: 24px;     /* 遊技機の筐体・首屏の外枠 */
  --radius-pill: 999px;     /* バッジ・タブ・釦・押し出し札 */

  /* 影 —— 2 種類。首屏（2a）は輪郭と同色の実体影、
     内容区（5a）は半透明に落とす。同じ濃さで通すと、
     文章の上でカードが浮きすぎて読みが止まる */
  --shadow-solid: 0 4px 0 var(--stroke);
  --shadow-shell: 0 6px 0 var(--stroke);
  --shadow-card: 0 3px 0 rgb(74 56 38 / .25);

  /* 盤面まわり（2a の実値）*/
  /* 端末の下端の物理的な占有（iPhone のホームバーなど）。
     JS からも読むので env() をここで 1 度だけ変数に落とす —— 各所で
     env() を直書きすると、JS 側だけ 0 のままになって釦が指の下に隠れる */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --board-bg: #FBF4E4;
  --board-edge: #4A3826;
  --board-grid: rgb(74 56 38 / .08);
  --board-ink: #4A3826;
  --board-hint: #8A755C;
  --dash: #EADFC8;          /* 行の区切りの破線 */
  --hi: #C05A2E;            /* 自己ベストだけの暖色 */
  --mascot-bg: #F6E7C6;
  --pill-track: #F6E7C6;    /* 丸ピルの溝 */

  color-scheme: light;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-synthesis: none;
}