/* ============================================================
   navilab テーマ — 転職体験記ジャーナル
   コンセプト: 「かいの転職87日間の記録」インディゴ×アンバー
   読み込み順: theme.css → components.css → pt-{page_type}.css
   ============================================================ */

:root {
  /* ── コアカラー（既存変数名を維持・後方互換） ── */
  --bg-primary:    #ffffff;
  --bg-secondary:  #f8fafc;
  --bg-tertiary:   #f1f5f9;
  --text-primary:  #111827;
  --text-secondary: #4b5563;
  --text-muted:    #6b7280; /* #9ca3af→#6b7280: ライト背景でWCAG AA確保(4.8:1) */

  /* アクセントカラー（インディゴ） */
  --accent:        #312e81;
  --accent-hover:  #1e1b4b;
  --accent-dark:   #1e1b4b;
  --accent-light:  #6366f1;

  /* セカンダリ（アンバー — 行動促進・変化） */
  --accent2:       #d97706;
  --accent2-hover: #b45309;

  /* 既存互換 */
  --cta-primary:   #f97316;
  --cta-hover:     #ea580c;
  --cta-glow:      rgba(249,115,22,0.3);
  /* グレード評価（セマンティックトークン参照） */
  --grade-s: var(--color-status-positive, #16a34a);
  --grade-a: #2563eb;
  --grade-b: var(--color-status-neutral, #d97706);
  --grade-c: var(--color-status-negative, #dc2626);

  /* ── 新フレームワーク変数 ── */
  --surface:       rgba(0,0,0,0.03);
  --border-color:  #e5e7eb;
  --shadow-sm:     rgba(0,0,0,0.06);
  --shadow-md:     rgba(0,0,0,0.1);
  --shadow-lg:     rgba(0,0,0,0.18);

  --header-bg:     #ffffff;
  --header-height: 60px;
  --logo-color:    #312e81;
  --footer-bg:     #0f172a;
  --footer-text:   #94a3b8;

  --table-header-bg:   #312e81;
  --table-header-text: #ffffff;
  --highlight-row-bg:  #fef9c3;
  --card-bg:       #ffffff;
  --badge-bg:      rgba(49,46,129,0.08);
  --star-color:    #f59e0b;

  --cta-bg:     #f97316;
  --cta-text:   #fff;
  --cta-shadow: rgba(249,115,22,0.3);
  --cta-block-start: #1e1b4b;
  --cta-block-end:   #312e81;

  --char-comment-bg: rgba(49,46,129,0.04);
  --accent-light-bg: rgba(49,46,129,0.06);
  --accent-border:   rgba(49,46,129,0.15);
  --accent-fade:     rgba(49,46,129,0.06);

  --hero-gradient: linear-gradient(135deg, rgba(49,46,129,0.06) 0%, rgba(217,119,6,0.04) 100%);

  /* ── セマンティックカラー（Stitch DESIGN.md準拠 — 全サイト共通） ── */
  --color-status-positive: #16a34a;  /* 転職成功・年収UP・推奨 */
  --color-status-negative: #dc2626;  /* リスク・注意・不推奨 */
  --color-status-neutral:  #d97706;  /* 中立・検討・注意（アンバー） */

  /* 後方互換エイリアス */
  --positive: var(--color-status-positive);
  --negative: var(--color-status-negative);

  /* ── タイポグラフィ ── */
  --font-body:    'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Noto Sans JP', -apple-system, sans-serif;
  --font-mono:    'Consolas', 'Courier New', 'SFMono-Regular', monospace;
  --line-height:  1.85;

  /* ── 8pxグリッドスペーシング（Stitch DESIGN.md準拠） ── */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 3rem;     /* 48px */
  --space-7: 3.5rem;   /* 56px */
  --space-8: 4rem;     /* 64px */

  --radius:       12px;
  --radius-sm:    6px;
  --radius-full:  9999px;
  --max-width:    1080px;
  --max-width-narrow: 860px;
  --container-pad: 24px;
}

/* ライトテーマ追加設定 */
body { border-top: 3px solid var(--accent); }

/* ── かいコメントボックス ── */
.kai-comment-box {
  background: rgba(49,46,129,0.04);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-primary);
}
.kai-comment-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  display: block;
}

/* ── アンバーCTA（行動促進用） ── */
.cta-btn-amber {
  background: linear-gradient(135deg, #f97316, #d97706);
  color: #fff;
  box-shadow: 0 4px 16px rgba(249,115,22,0.35);
}
.cta-btn-amber:hover { box-shadow: 0 6px 24px rgba(249,115,22,0.5); color: #fff; }

/* ── ヒーロー（タイムライン型） ── */
.journal-hero { border-bottom: 1px solid var(--border-color); }
.timeline-dot { border-color: var(--bg-primary); }

/* ── ライトテーマの比較表 ── */
.comparison-table td { color: var(--text-primary); }
.comparison-table tr:hover td { background: var(--bg-secondary); }

/* ── ライトテーマのステータスバー ── */
body { box-shadow: inset 0 4px 0 var(--accent); }

/* ── リンク ── */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }