/* ==========================================================================
   Design Tokens — Steam Portal Theme
   --------------------------------------------------------------------------
   サイト全体の色・タイポグラフィ・影・レイアウト寸法の単一の定義場所。
   コンポーネントCSS（style.css / components/*.css）はここの変数を var() で参照する。
   デザイン調整は基本ここを書き換えるだけで全体に反映される。
   ※ マークアップ（構造）の変更は Twig テンプレート側。
   ========================================================================== */
:root {
  /* Brand & Base */
  --color-deep-dark: #171a21;
  --color-dark-blue: #1b2838;
  --color-blue-gray: #2a475e;
  --color-steam-blue: #66c0f4;
  --color-steam-blue-bright: #1a9fff;
  --color-steam-green: #5c9e2e;
  --color-steam-green-hover: #6cb32f;

  /* Text */
  --color-text-white: #ffffff;
  --color-text-light: #c6d4df;
  --color-text-muted: #8f98a0;
  --color-text-dark-muted: #556772;

  /* Status Tags — Library */
  --color-playing: #a4d007;
  --color-cleared: #66c0f4;
  --color-next: #e8a23a;
  --color-paused: #b8a074;
  --color-unplayed: #8f98a0;
  /* 「ほぼ未プレイ」: 未プレイのグレーとプレイ中のライムの中間に置いた
     くすんだセージ。未プレイ寄りの見え方を意図している。 */
  --color-barely-played: #6f9d86;
  --color-endless: #9b59b6;
  --color-dropped: #c35c2c;

  /* Wishlist Tags */
  --color-must: #de3c3c;
  --color-sale: #a4d007;
  --color-jp: #66c0f4;
  --color-sub: #2ecc71;
  --color-update: #e8a23a;

  /* Semantic */
  --color-price-drop: #a4d007;
  --color-new-feature: #66c0f4;
  --color-warning: #e8a23a;
  --color-alert: #de3c3c;
  /* 危険操作（退会など）の面と枠。リテラルの hex/rgba を
     コンポーネント CSS に書かないための派生トークン（DESIGN.md §0）。 */
  --color-alert-tint: rgba(222, 60, 60, 0.12);
  --color-alert-border: rgba(222, 60, 60, 0.35);

  /* Review Score Tiers（レビュー評価の文字色）— Steam ストアの評価表示に寄せた
     配色。カード（Wishlist / カタログ）とゲーム詳細で共通。色を変えるのは
     ここだけ。好評はテーマのアクセント（customize.css でシアン化される）に
     追従させ、賛否両論／不評はストア寄りの値で固定する。 */
  --color-review-positive: var(--color-steam-blue);
  --color-review-mixed: #e8a23a;
  --color-review-negative: #c35c2c;
  --color-review-none: var(--color-text-muted);

  /* Surface & Border */
  --color-card-hover: #3d6b8e;
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(23, 26, 33, 0.85);

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.4) 0px 2px 8px;
  --shadow-elevated: rgba(0, 0, 0, 0.6) 0px 4px 16px;
  --shadow-focus: 0 0 0 2px rgba(102, 192, 244, 0.4);

  /* Typography */
  --font-primary: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Noto Sans Mono", "Source Code Pro", "Consolas", monospace;

  /* Layout */
  --nav-height: 56px;
  --content-max-width: 1200px;
  --sidebar-width: 260px;
}