/* デザイントークン。docs/design/design.md
   LP と本体で必ず同じものを使う。見た目が変わると別サービスに見える。

   値は LP_mockup/ の Claude Design 版に合わせてある。
   トークン「名」は変更していない（site.css / ranking.js がそのまま動く）。 */

:root {
  /* --- 色 -----------------------------------------------------------
     増やさない。色を足したくなったら情報設計が間違っている合図。 */
  --ink: #0f172a;
  --paper: #fafaf9;
  --surface: #ffffff;

  /* 操作とブランドの色。CTA・リンク・見出しのアイキャッチ (インパルス・オレンジ) */
  --signal: #ea580c;
  --signal-hover: #c2410c;
  --signal-tint: rgba(234, 88, 12, 0.08);
  --signal-edge: rgba(234, 88, 12, 0.25);
  --signal-band: #fff7ed;

  /* 主指標の最安値だけに使う。ブランドアクセントと同系統で視線を引きつける */
  --verified: #ea580c;
  --verified-tint: rgba(234, 88, 12, 0.08);
  --verified-chip: rgba(234, 88, 12, 0.15);

  /* 注意喚起。上限量の超過と「判断を誤る」側の提示のみ */
  --warn: #b4451f;
  --warn-tint: rgba(180, 69, 31, 0.1);

  /* ink からの派生。個別に色を定義しない */
  --muted: rgba(22, 24, 29, 0.85);
  --muted-strong: rgba(22, 24, 29, 0.9);
  --muted-weak: rgba(22, 24, 29, 0.72);
  --muted-faint: rgba(22, 24, 29, 0.65);
  --line: rgba(22, 24, 29, 0.1);
  --line-soft: rgba(22, 24, 29, 0.06);
  --fill-weak: rgba(22, 24, 29, 0.07);
  --fill-panel: rgba(22, 24, 29, 0.03);

  /* --- 書体 ---------------------------------------------------------
     ⚠️ Noto Sans JP / JetBrains Mono は Google Fonts から読み込んでいる。
        design.md §8 の self-host 要件は未達。サブセット化して
        src/assets/fonts/ に置き換えるまでの暫定。 */
  --font-display: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP',
    sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;

  /* --- 型スケール (rem) ---------------------------------------------
     モバイルの値。900px 以上は各コンポーネント側で上書きする。 */
  --size-xs: 0.6875rem; /* 11px */
  --size-sm: 0.78125rem; /* 12.5px */
  --size-base: 1rem; /* 16px — 本文はこれを下回らない */
  --size-md: 1.125rem; /* 18px */
  --size-lg: 1.375rem; /* 22px — h2 (SP) */
  --size-xl: 1.6875rem; /* 27px — h1 (SP) */
  --size-2xl: 2.875rem; /* 46px — h1 (PC) */

  /* --- スペーシング — 4px ベース ------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- 罫線階層 ------------------------------------------------------ */
  --rule-section: 1px solid var(--line);
  --rule-major: 1px solid var(--line);
  --rule-row: 1px solid var(--line-soft);
  --rule-minor: 1px solid var(--line-soft);

  /* --- 角丸 ----------------------------------------------------------
     0 ではなくなった。カード 14px / 面 16px / 操作 8-10px / チップは丸。 */
  --radius: 14px;
  --radius-lg: 16px;
  --radius-interactive: 8px;
  --radius-cta: 10px;
  --radius-thumb: 10px;
  --radius-pill: 999px;

  /* --- 影 ------------------------------------------------------------
     浮かせるのはヒーローのランキングカードだけ。 */
  --shadow-card: 0 8px 24px rgba(22, 24, 29, 0.06);
  --shadow-card-lg: 0 10px 34px rgba(22, 24, 29, 0.07);

  --tap-target: 44px;
  --page-max: 1400px;
}