/*
 * Nettoge design v2 — tokens（v2 の値の正本）
 *
 * html[data-ntg-design="v2"] のときだけ効く（lib/nettoge/v2/templates/header.php が付ける）。
 * 旧デザインの tokens-nettoge.css とは別ファイルにしている（他の作業でそのファイルが上書きされても v2 が崩れないように）。
 * 部品は build/css/v2/core.css・single.css・home.css。設計は lib/nettoge/v2/README.md。
 * 後半の「旧トークンの付け替え」は、本文の部品（ブログカードなど）を v2 の配色に寄せるため。
 */
html[data-ntg-design="v2"] {
  /* 面 */
  --ntg2-bg: #ffffff;
  --ntg2-surface: #ffffff;
  --ntg2-paper: #f6f5f3;
  --ntg2-paper-rgb: 246, 245, 243;
  /* 文字 */
  --ntg2-text: #1a1714;
  --ntg2-sub: #5f5a55;
  --ntg2-muted: #8a847d;
  /* 色（赤 = 見出しの縦線と現在地、青緑 = ラベル・ホバー・目次の現在地、青 = 文中のリンク） */
  --ntg2-accent: #b72305;
  --ntg2-teal: #2f7a72;
  --ntg2-teal-bg: #e8f2f0;
  --ntg2-link: #1d61e0;
  /* 線 */
  --ntg2-line: #e3e0dc;
  --ntg2-line-2: #d3cec7;
  /* 形・寸法 */
  --ntg2-radius: 6px;
  --ntg2-radius-sm: 4px;
  --ntg2-side-w: 260px;
  --ntg2-col-gap: 48px;
  --ntg2-header-h: 64px;
  --ntg2-header-h-sp: 56px;
  --ntg2-shadow-float: 0 2px 10px rgba(0, 0, 0, 0.08);
  /* 文字組み */
  --ntg2-font-size: 16px;
  --ntg2-font-size-sp: 15.5px;
  --ntg2-line-height: 1.9;
  --ntg2-title-size: 28px;
  --ntg2-title-size-sp: 21px;
  --ntg2-h2-size: 23px;
  --ntg2-h2-size-sp: 20px;
  --ntg2-h2-bar: 5px;
  --ntg2-h3-size: 19px;
  --ntg2-h3-size-sp: 17.5px;
  --ntg2-h4-size: 17px;
  --ntg2-sec-h-size: 18px;
  /* ゲームの帯（ハブ導線・サイドの攻略メニュー）: 紙色の地に写真を右端だけ。白系ロゴは暗くする */
  --ntg2-plate-fg: var(--ntg2-text);
  --ntg2-plate-border: var(--ntg2-line);
  --ntg2-plate-base: var(--ntg2-paper);
  --ntg2-plate-overlay: linear-gradient(90deg, rgb(var(--ntg2-paper-rgb)) 0%, rgb(var(--ntg2-paper-rgb)) 45%, rgba(var(--ntg2-paper-rgb), 0.7) 75%, rgba(var(--ntg2-paper-rgb), 0.35) 100%);
  --ntg2-plate-img-pos: right center;
  --ntg2-plate-img-size: 60% auto;
  --ntg2-plate-logo-filter: brightness(0.28) saturate(1.4);
  --ntg2-plate-logo-opacity: 0.85;
  /* トップのヒーロー */
  --ntg2-hero-art: url("../../../assets/img/nettoge-header-art-light.webp?v=20260808p");
  --ntg2-hero-base: var(--ntg2-paper);
  --ntg2-hero-overlay: linear-gradient(90deg, rgb(var(--ntg2-paper-rgb)) 0%, rgb(var(--ntg2-paper-rgb)) 36%, rgba(var(--ntg2-paper-rgb), 0.6) 60%, rgba(var(--ntg2-paper-rgb), 0.08) 100%);
  --ntg2-hero-overlay-sp: linear-gradient(90deg, rgb(var(--ntg2-paper-rgb)) 0%, rgba(var(--ntg2-paper-rgb), 0.88) 55%, rgba(var(--ntg2-paper-rgb), 0.55) 100%);
  /* ゲームのタイル（写真なのでテーマによらず暗い） */
  --ntg2-tile-base: #14161a;
  --ntg2-tile-fg: #ffffff;
  --ntg2-tile-overlay: linear-gradient(180deg, rgba(14, 16, 20, 0.2) 0%, rgba(14, 16, 20, 0.35) 45%, rgba(14, 16, 20, 0.85) 100%);
  /* シェアのブランド色 */
  --ntg2-brand-x: #0f1419;
  --ntg2-brand-x-border: #0f1419;
  --ntg2-brand-line: #06c755;
  --ntg2-brand-on: #ffffff;
  /* テーマで出し分ける物（テーマ切り替えの月/太陽） */
  --ntg2-show-in-light: grid;
  --ntg2-show-in-dark: none;


  /* ナビのゲームのカード（core.css「ゲームのカード」）: 写真の上に置くのでテーマによらない */
  --ntg2-g-width: 136px;
  --ntg2-g-width-open: 208px;
  --ntg2-g-height: 58px;
  --ntg2-g-slant: 16px;
  --ntg2-g-overlap: 20px;
  --ntg2-g-bg3: #d4b26a;
  --ntg2-g-ff14: #7f9fe0;
  --ntg2-g-sz: #ff9a1f;
  --ntg2-g-nms: #ff9d3c;
  --ntg2-g-arc: #f2961e;
  --ntg2-g-tes: #c9a86a;
  --ntg2-g-s2: #e0a63c;
  --ntg2-g-pz: #e0413a;
  --ntg2-g-fallout: #ffd23f;
  --ntg2-g-default: var(--ntg2-teal);

  /* 旧トークンの付け替え（本文の部品） */
  --nettoge-retro-blogcard-bg: var(--ntg2-surface);
  --nettoge-retro-blogcard-border: var(--ntg2-line);
  --nettoge-retro-blogcard-fg: var(--ntg2-text);
  --nettoge-retro-blogcard-muted: var(--ntg2-muted);
  --nettoge-retro-blogcard-shadow: none;
}

html[data-ntg-design="v2"][data-nettoge-theme="dark"] {
  --ntg2-bg: #1e1e1e;
  --ntg2-surface: #24262a;
  --ntg2-paper: #26292d;
  --ntg2-paper-rgb: 38, 41, 45;
  --ntg2-text: #e8e4df;
  --ntg2-sub: #b5afa8;
  --ntg2-muted: #8d877f;
  --ntg2-accent: #d9482b;
  --ntg2-teal: #6cc2b6;
  --ntg2-teal-bg: rgba(108, 194, 182, 0.14);
  --ntg2-link: #8ab4f8;
  --ntg2-line: #36393e;
  --ntg2-line-2: #464a50;
  --ntg2-shadow-float: 0 2px 12px rgba(0, 0, 0, 0.4);
  --ntg2-plate-fg: #ffffff;
  --ntg2-plate-border: transparent;
  --ntg2-plate-base: #14161a;
  --ntg2-plate-overlay: linear-gradient(90deg, rgba(20, 22, 26, 0.95) 0%, rgba(18, 20, 24, 0.82) 55%, rgba(14, 16, 20, 0.55) 100%);
  --ntg2-plate-img-pos: center;
  --ntg2-plate-img-size: cover;
  --ntg2-plate-logo-filter: none;
  --ntg2-plate-logo-opacity: 1;
  --ntg2-hero-art: url("../../../assets/img/nettoge-header-art-dark.webp?v=20260808p");
  --ntg2-hero-base: #0c0f14;
  --ntg2-hero-overlay: linear-gradient(90deg, rgba(12, 15, 20, 1) 0%, rgba(12, 15, 20, 0.92) 30%, rgba(12, 15, 20, 0.5) 55%, rgba(12, 15, 20, 0) 80%);
  --ntg2-hero-overlay-sp: linear-gradient(90deg, rgba(12, 15, 20, 0.95) 0%, rgba(12, 15, 20, 0.8) 55%, rgba(12, 15, 20, 0.55) 100%);
  --ntg2-brand-x-border: #4a4f57;
  --ntg2-show-in-light: none;
  --ntg2-show-in-dark: grid;

}