/* =========================================================
 * EraBest Tokens — 独立層（JIN:R 非依存）
 * ─────────────────────────────────────────────────────────
 * 真のソース: handoff/src/tokensCD.jsx + handoff/src/libP4Tokens.jsx
 * このファイルは TOKENS_C + P4Tokens を CSS 変数化した宣言層。
 *
 * 命名規則：
 *   - 短縮形 `--era-*` （handoff/erabest.css 命名と整合）
 *   - 旧形式 `--era-color-*` `--era-font-*` `--era-size-*` `--era-line-*` `--era-radius-*` も
 *     エイリアスとして残置（既に Phase 2 で動作確認済みのため）
 *
 * 改修方針：
 *   - JIN:R に依存しない（このファイル単体で意味を持つ）
 *   - A 方針（自作テーマ）に乗り換えてもそのまま転用可能
 *   - 値の変更はここだけで全体に波及
 * ========================================================= */

:root {
  /* ── Colors（短縮形 — handoff/erabest.css と整合） ───────── */
  --era-bg:           #F7F3EB;  /* page background — soft warm cream */
  --era-bg-alt:       #EDE6D5;  /* related sections, alt panels */
  --era-paper:        #FFFFFF;  /* card/panel background */
  --era-paper-warm:   #FBF7EE;  /* info boxes, quote cards */
  --era-paper-deep:   #F4EFE3;  /* table stripes, section wells */

  --era-ink:          #1F1B14;  /* body color */
  --era-ink-soft:     #3D3527;  /* heading subtle */
  --era-ink-muted:    #7A7060;  /* captions, dates */

  --era-line:         #E3DCCA;  /* borders */
  --era-line-soft:    #F0EADB;  /* faint borders */

  --era-accent:       #2E5E3D;  /* brand: deep green - trust */
  --era-accent-soft:  #E8EFE7;
  --era-accent-deep:  #1F4029;  /* hover/emphasis */
  --era-accent-ink:   #FFFFFF;

  --era-warm:         #C8553D;  /* terracotta - NEW/PR/cheapest */
  --era-warm-soft:    #F6E8E2;
  --era-warm-deep:    #7A2F1C;

  --era-rank1:        #C8A14A;  /* gold */
  --era-rank2:        #9B9B9B;  /* silver */
  --era-rank3:        #A97142;  /* bronze */

  --era-star:         #C8A14A;  /* star rating */
  --era-star-empty:   #E3DCCA;

  --era-yellow-bar:   #B08A3E;
  --era-yellow-tint:  #F3EBD4;
  --era-yellow-deep:  #6B521F;
  --era-blue-bar:     #5A7080;
  --era-blue-tint:    #E5EAEE;
  --era-blue-deep:    #3A4A58;

  /* マーカー (本文中の蛍光ペン強調) — 背景 #F7F3EB と同化しない明度差を確保
   * 注意: --era-yellow-tint (#F3EBD4) は背景と同化して見えなくなるため使用しない */
  --era-marker:       #F0D87A;  /* マスタード寄りイエロー (主) */
  --era-marker-warm:  #F4C9B8;  /* ダスティピンク (警告ニュアンス・任意) */

  /* ── Fonts ───────────────────────────────────────────── */
  --font-jp:        "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-mincho:    "Shippori Mincho", "Noto Serif JP", serif;
  --font-latin:     "Cormorant Garamond", Georgia, serif;
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;

  /* ── Type scale（日本語可読性最適化） ─────────────────── */
  --fs-body:        15px;
  --fs-body-sm:     13.5px;
  --fs-lead:        17px;
  --fs-label:       10.5px;
  --fs-label-jp:    11.5px;
  --fs-h1:          30px;
  --fs-h2:          22px;
  --fs-h3:          18px;
  --fs-h4:          15.5px;

  --lh-body:        1.85;
  --lh-tight:       1.7;
  --lh-loose:       2.0;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      14px;
  --radius-pill:    999px;

  /* ── Layout ──────────────────────────────────────────── */
  --layout-max:     1188px;
  --layout-article: 760px;
  --sidebar-w:      300px;
  --layout-pad-x:   40px;
  --layout-gap:     48px;

  /* ── Aliases（旧形式・後方互換用） ─────────────────────── */
  --era-color-bg:           var(--era-bg);
  --era-color-bg-alt:       var(--era-bg-alt);
  --era-color-paper:        var(--era-paper);
  --era-color-ink:          var(--era-ink);
  --era-color-ink-soft:     var(--era-ink-soft);
  --era-color-ink-muted:    var(--era-ink-muted);
  --era-color-line:         var(--era-line);
  --era-color-line-soft:    var(--era-line-soft);
  --era-color-accent:       var(--era-accent);
  --era-color-accent-soft:  var(--era-accent-soft);
  --era-color-accent-ink:   var(--era-accent-ink);
  --era-color-warm:         var(--era-warm);
  --era-color-warm-soft:    var(--era-warm-soft);
  --era-color-paper-warm:   var(--era-paper-warm);
  --era-color-paper-deep:   var(--era-paper-deep);
  --era-color-accent-deep:  var(--era-accent-deep);
  --era-color-yellow-bar:   var(--era-yellow-bar);
  --era-color-yellow-tint:  var(--era-yellow-tint);
  --era-color-yellow-deep:  var(--era-yellow-deep);
  --era-color-warm-deep:    var(--era-warm-deep);
  --era-color-blue-bar:     var(--era-blue-bar);
  --era-color-blue-tint:    var(--era-blue-tint);
  --era-color-blue-deep:    var(--era-blue-deep);
  --era-color-rank-1:       var(--era-rank1);
  --era-color-rank-2:       var(--era-rank2);
  --era-color-rank-3:       var(--era-rank3);
  --era-color-star:         var(--era-star);
  --era-color-star-empty:   var(--era-star-empty);

  --era-font-jp:        var(--font-jp);
  --era-font-jp-bold:   var(--font-jp);
  --era-font-mincho:    var(--font-mincho);
  --era-font-latin:     var(--font-latin);
  --era-font-mono:      var(--font-mono);
  --era-font-heading:   var(--font-jp);
  --era-font-body:      var(--font-jp);

  --era-size-body:        var(--fs-body);
  --era-size-body-small:  var(--fs-body-sm);
  --era-size-lead:        var(--fs-lead);
  --era-size-label:       var(--fs-label);
  --era-size-label-jp:    var(--fs-label-jp);
  --era-size-heading:     var(--fs-h3);
  --era-size-title:       var(--fs-h4);

  --era-line-body:        var(--lh-body);
  --era-line-tight:       var(--lh-tight);
  --era-line-loose:       var(--lh-loose);

  --era-radius-sm:        var(--radius-sm);
  --era-radius-md:        var(--radius-md);
  --era-radius-lg:        var(--radius-lg);
  --era-radius-pill:      var(--radius-pill);
}