/* =========================================================
   テーマ（デザインパターン切替）
   body に theme-* クラスを付けると :root トークンを上書きする。
   訪問者が画面下のスイッチャーでトーンを選べる（選択は localStorage に保存）。
   ※ 見出しフォントは Google Fonts（外部依存）を読み込む。
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Playfair+Display:wght@600;800&family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Maru+Gothic:wght@500;700&display=swap');

/* 見出しに使う表示フォント（各テーマで定義） */
.theme-clinical .hero__name,
.theme-clinical .section__title,
.theme-clinical .nav__logo,
.theme-clinical .work-card__title,
.theme-clinical .value-card__title,
.theme-clinical .skill-group__title,
.theme-clinical .timeline__body h3,
.theme-editorial .hero__name,
.theme-editorial .section__title,
.theme-editorial .nav__logo,
.theme-editorial .work-card__title,
.theme-editorial .value-card__title,
.theme-editorial .skill-group__title,
.theme-editorial .timeline__body h3,
.theme-terminal .hero__name,
.theme-terminal .section__title,
.theme-terminal .nav__logo,
.theme-terminal .work-card__title,
.theme-terminal .value-card__title,
.theme-terminal .skill-group__title,
.theme-terminal .timeline__body h3,
.theme-warm .hero__name,
.theme-warm .section__title,
.theme-warm .nav__logo,
.theme-warm .work-card__title,
.theme-warm .value-card__title,
.theme-warm .skill-group__title,
.theme-warm .timeline__body h3 {
  font-family: var(--font-display);
}

/* =========================================================
   1. Clinical Serif — 清潔・洗練（ライト）
   ========================================================= */
:root.theme-clinical {
  --color-bg: #fbfaf7;
  --color-bg-alt: #f1f0ea;
  --color-text: #1f2a2e;
  --color-muted: #66736f;
  --color-accent: #2f7d6b;
  --color-accent-soft: #dcece7;
  --color-border: #e5e1d7;
  --font-base: "Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --radius: 10px;
}
.theme-clinical body { background-image: radial-gradient(circle at 15% 0%, rgba(47, 125, 107, 0.06), transparent 45%); }
.theme-clinical .section__title { letter-spacing: 0.01em; }
.theme-clinical .hero__role { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.82rem; }

/* =========================================================
   2. Editorial — 雑誌・高コントラスト（ライト）
   ========================================================= */
:root.theme-editorial {
  --color-bg: #f7f3ea;
  --color-bg-alt: #efe8da;
  --color-text: #17130d;
  --color-muted: #6d6252;
  --color-accent: #c1440e;
  --color-accent-soft: #f3e0d2;
  --color-border: #ddd3c1;
  --font-base: "Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display: "Playfair Display", "Shippori Mincho", serif;
  --radius: 4px;
}
.theme-editorial .hero__name { font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1.05; font-weight: 800; }
.theme-editorial .section__title { font-weight: 800; }
.theme-editorial .hero__role { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.8rem; }
.theme-editorial .section__title::after { width: 64px; height: 3px; }

/* =========================================================
   3. Terminal Dev — エンジニア・ダーク
   ========================================================= */
:root.theme-terminal {
  --color-bg: #0d1117;
  --color-bg-alt: #131922;
  --color-text: #e6edf3;
  --color-muted: #8b949e;
  --color-accent: #3fb950;
  --color-accent-soft: #17311f;
  --color-border: #263040;
  --font-base: "Zen Kaku Gothic New", -apple-system, sans-serif;
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --radius: 6px;
}
.theme-terminal body {
  background-color: #0d1117;
  background-image:
    linear-gradient(rgba(63, 185, 80, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 185, 80, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.theme-terminal .hero__role { font-family: var(--font-display); letter-spacing: 0.05em; }
.theme-terminal .hero__role::before { content: "$ "; opacity: 0.7; }
.theme-terminal .nav__logo::before { content: "> "; color: var(--color-accent); }
.theme-terminal .section__title { text-transform: lowercase; }
.theme-terminal .work-card__tags li { font-family: var(--font-display); font-size: 0.72rem; }

/* =========================================================
   4. Warm Human — 親しみ・丸ゴシック（ライト）
   ========================================================= */
:root.theme-warm {
  --color-bg: #fdf8f2;
  --color-bg-alt: #f6ece0;
  --color-text: #3a2f28;
  --color-muted: #8a7a6c;
  --color-accent: #d97d4f;
  --color-accent-soft: #f7e4d4;
  --color-border: #ecdfd0;
  --font-base: "Zen Maru Gothic", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display: "Zen Maru Gothic", sans-serif;
  --radius: 20px;
}
.theme-warm .btn { border-radius: 999px; }
.theme-warm .hero__role { font-weight: 700; }
.theme-warm .section__title::after { border-radius: 999px; height: 5px; }

/* =========================================================
   テーマ・スイッチャー（訪問者がトーンを選べるUI）
   ========================================================= */
.theme-switcher {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.theme-switcher__label {
  align-self: center;
  padding: 0 0.5rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8b93a1;
  white-space: nowrap;
}
.theme-switcher button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: #cfd4dd;
  background: transparent;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.theme-switcher button:hover { color: #fff; }
.theme-switcher button.is-active { background: #fff; color: #14161c; }

@media (max-width: 640px) {
  .theme-switcher { width: calc(100% - 24px); overflow-x: auto; justify-content: flex-start; }
}