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

   値はすべて design 稿（design/GomokuFree.html）の実測値をそのまま持つ。
   12.5px や 14.5px のような半端な字の大きさは設計道具の書き出しの癖だが、
   丸めると版面がずれるので**丸めない**。 */
:root {
  /* ── 面 ── */
  --page: #F6F6F3;            /* ページ地 */
  --surface: #FFFFFF;         /* カード・ボタンの地 */
  --footer-bg: #33403A;       /* フッターの深緑 */
  --nav-hover: #F0F0EA;       /* ヘッダーのリンクに乗せる薄い面 */
  --btn-gray-hover: #EFEFE9;  /* 灰ボタンの hover */
  --btn-green-hover: #EEF5EF; /* 緑の縁取りボタンの hover */

  /* ── 文字 ── */
  --ink: #2B2B28;             /* 見出し・主文字 */
  --body: #4B4B46;            /* 本文 */
  --nav-ink: #55554F;         /* ヘッダーのリンク */
  --muted: #8A8A85;           /* 注記・日付 */
  --muted-soft: #9B9B94;      /* ロゴの読み仮名 */
  --btn-gray-ink: #6B6B65;    /* 灰ボタンの字 */
  --footer-ink: #C8CFC9;      /* フッターの主リンク */
  --footer-sub: #8F9A92;      /* フッターの副リンク・著作権表示 */

  /* ── 線 ── */
  --line-soft: #EDEBE4;    /* 表の行区切り。--line より薄い */
  --line: #E4E2DA;            /* カード・ヘッダー下端 */
  --line-btn: #C9C7BD;        /* 灰ボタンの縁 */
  --line-footer: rgb(255 255 255 / .12);

  /* ── 強調 ── */
  --accent: #2F9C68;          /* 主。CTA・見出しの標・「詰」の字 */
  --accent-hover: #268254;
  --accent-deep: #3E5C4C;     /* 次点。選択中の分節ボタン・縁取りボタン */

  /* 塗りつぶした面の上に乗る字。緑ボタン・深緑の分節・フッターの名乗り */
  --on-fill: #FFFFFF;

  /* 禁じ手の印。**design 稿には無い**（禁じ手の可視化は本サイトの差別化の芯で、
     設計案の時点では未設計だった）。盤の木地・黒石・白石・緑の輪のどれとも
     衝突しない色として選んだ暗い赤。PLAN.md §7 参照 */
  --forbidden: #B4342A;
  /* 禁じ手の × 印。色を変えるときは SVG 内の %23B4342A も直すこと
     （data URI の中なので var() が効かない）*/
  --forbidden-mark: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'><g%20stroke='%23B4342A'%20stroke-width='3.4'%20stroke-linecap='round'><line%20x1='3'%20y1='3'%20x2='17'%20y2='17'/><line%20x1='17'%20y1='3'%20x2='3'%20y2='17'/></g></svg>");

  /* ── 盤 ── */
  --board-wood-a: #EAC77F;    /* 木地の明 */
  --board-wood-b: #D7A65A;    /* 木地の暗 */
  --board-line: #5b4426;      /* 罫線・星 */
  --board-grain: rgb(96 64 20 / .055);   /* 木目 */

  /* ── 石 ── */
  --stone-black: radial-gradient(circle at 35% 30%, #5a5a64, #0f0f13 68%);
  --stone-white: radial-gradient(circle at 35% 30%, #ffffff, #D8D4C8 72%);
  --stone-white-edge: rgb(0 0 0 / .12);
  --stone-black-shadow: 0 2px 4px rgb(0 0 0 / .45);
  --stone-white-shadow: 0 2px 4px rgb(0 0 0 / .3);
  --stone-last: var(--accent);  /* 直前の一手を囲む輪 */
  --stone-win: #C89932;         /* 勝ち筋を囲む輪（金） */

  /* ロゴの石。盤の石より一段明るい —— 小さく描くので、同じ値だと潰れる */
  --logo-black: radial-gradient(circle at 35% 30%, #565660, #101014 70%);
  --logo-white: radial-gradient(circle at 35% 30%, #fff, #D9D5C9 75%);
  --logo-white-edge: #C9C4B6;

  /* トップ brand ロックアップ（ユーザー指定の実測値） */
  --brand-lock-ink: #222220;
  --brand-lock-h1: #55554E;
  --brand-lock-black: radial-gradient(circle at 35% 30%, #5a5a64, #0f0f13 68%);
  --brand-lock-white: radial-gradient(circle at 35% 30%, #ffffff, #D8D4C8 72%);
  --brand-lock-white-edge: #BBBBBB;
  --brand-lock-name-size: 17px;
  --brand-lock-h1-size: 12px;

  /* 誤タップ防止の切替。切のときの溝 */
  --switch-off: #BDBBB1;

  /* ── 遮罩 ── */
  --scrim: rgb(30 24 14 / .42);        /* 盤に被せる暗幕 */
  --scrim-card: rgb(255 255 255 / .97);/* 暗幕の上のカード */

  /* ── 影 ── */
  --shadow-board: 0 6px 22px rgb(60 45 20 / .25);
  --shadow-overlay: 0 12px 40px rgb(0 0 0 / .35);

  /* ── 形 ── */
  --r-bar: 2px;      /* 見出し前の緑の棒 */
  --r-nav: 6px;      /* ヘッダーのリンク */
  --r-seg: 7px;      /* 分節ボタン */
  --r-btn: 8px;      /* 通常のボタン */
  --r-cta: 9px;      /* 遮罩の中の大きなボタン */
  --r-card: 10px;    /* カード・盤 */
  --r-overlay: 12px; /* 遮罩の中のカード */

  /* ── 字の大きさ ──
     design の実測値。半端な値も丸めない（冒頭の注記を参照） */
  --fs-logo-sub: 10.5px;   /* ゴモクフリー */
  --fs-copy: 12px;         /* 著作権表示 */
  --fs-label: 12.5px;      /* 「強さ」「その一」・副題 */
  --fs-footnav: 13px;      /* フッターのリンク・分節ボタン */
  --fs-nav: 13.5px;        /* ヘッダーのリンク・カード本文・お知らせ */
  --fs-body: 15px;         /* 本文・FAQ の答え。トップの長文が主役になったので 14px から一段上げる */
  --fs-btn: 14.5px;        /* 工具条のボタン・FAQ の問い */
  --fs-status: 15px;       /* 状態帯・次点ボタン */
  --fs-card-title: 15.5px; /* カードの見出し */
  --fs-logo: 16px;         /* フッターのロゴ */
  --fs-cta: 16.5px;        /* ひとりで対戦（AI） */
  --fs-lead: 18px;         /* ヘッダーのロゴ・遮罩の見出し */
  --fs-result: 22px;       /* 勝敗の文字 */
  --fs-h1: clamp(20px, 3.8vw, 26px);
  --fs-h2: clamp(18px, 3vw, 22px);

  /* ── 幅 ── */
  --w-page: 800px;   /* ヘッダー・main・フッターの内容幅。920px だと本文（720px）との差 200px が右側の空白として見えるため、本文柱にそろえて 800px に */
  --w-article: 720px;/* 本文・FAQ・お知らせ */
  --w-board: 560px;  /* 盤とその周辺 */
  --w-menu: 350px;   /* 対局開始の遮罩 */
  --w-result: 320px; /* 勝敗の遮罩 */

  /* ── 触れる的の最小寸法 ──
     指で押すものは 44px 以上。design 稿が全ボタンに min-height を
     置いているのはこのため。値ごとに違うのでまとめて持つ */
  --tap: 44px;
  --tap-seg: 42px;
  --tap-tool: 48px;
  --tap-cta: 52px;

  /* ── 字体 ──
     見出しは明朝、本文はゴシック。design 稿の指定どおり */
  --font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
               'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  color-scheme: light;
  font-synthesis: none;
}