/* =========================================================
   base.css — リセット・ベース要素
   ─────────────────────────────────────────────
   tokens.css のスケールを「素のHTML」に適用する。
   コンポーネント特有のスタイルは components.css へ。
   ========================================================= */

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  font-family: var(--font-jp);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
  height: auto;
}

img { vertical-align: middle; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

ul, ol { padding: 0; list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p { line-height: var(--lh-body); }

/* 段落間 — 連続するパラグラフは generous に離す（料亭の静けさ） */
p + p { margin-top: var(--paragraph-gap); }


/* =========================================================
   見出しスケール（h1〜h6）
   ─────────────────────────────────────────────
   役割マッピング：
   - h1 … ページ最大の見出し（ページにつき必ず1つ）
   - h2 … セクション見出し
   - h3 … サブセクション・カード見出し
   - h4 … 中ブロック見出し
   - h5 … 小ブロック見出し
   - h6 … ラベル的小見出し（CAPS気味）

   非対称マージン方針：
   見出しの「上を広く、下を狭く」して、紙面の章タイトルのような
   呼吸を作る。コンポーネント（.section-title 等）が独自に margin
   を定義する場合はそちらが優先される（具体度で勝つ）。
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-jp);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-normal);
  color: var(--color-primary-deep);
  text-wrap: balance;
}

/* :where() で specificity 0 — コンポーネントの個別定義に必ず負ける */
:where(h2) { margin-block: clamp(56px, 7vw, 96px) clamp(16px, 2vw, 24px); }
:where(h3) { margin-block: clamp(40px, 5vw, 64px) clamp(14px, 1.5vw, 20px); }
:where(h4) { margin-block: clamp(32px, 4vw, 48px) clamp(12px, 1.25vw, 16px); }
:where(h5) { margin-block: clamp(24px, 3vw, 36px) clamp(10px, 1vw, 14px); }

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--lh-display);
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}

h4 {
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}

h5 {
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wider);
}

h6 {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-brand);
}


/* =========================================================
   リンク（thin underline + color transition）
   ─────────────────────────────────────────────
   素のリンクはアンダーラインを薄く敷き、ホバーで色だけ
   変化させる（線の太さや位置は動かさない）。
   ========================================================= */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.2em;
  transition:
    color 300ms var(--ease-out),
    text-decoration-color 300ms var(--ease-out);
}

a:hover {
  color: var(--color-primary-deep);
  text-decoration-color: var(--color-brand);
}

/* アンダーラインを持たないリンク用ユーティリティ */
.link-clean {
  text-decoration: none;
}
.link-clean:hover {
  text-decoration: none;
}


/* =========================================================
   フォーカスリング
   ─────────────────────────────────────────────
   「静か」だが「確か」に位置を伝える。
   ========================================================= */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-offset var(--duration-fast) var(--ease-out);
}


/* =========================================================
   テキスト選択色
   ========================================================= */
::selection {
  background: var(--color-bg-pale);
  color: var(--color-primary-deep);
}


/* =========================================================
   ベース要素：その他
   ========================================================= */
hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

strong, b {
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
}

em {
  font-style: italic;
}

small {
  font-size: var(--text-xs);
  color: var(--color-text-mute);
}

mark {
  background: var(--color-brand-24);
  color: inherit;
  padding: 0 0.1em;
}

/* code は最低限 */
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}


/* =========================================================
   A11y ユーティリティ
   ========================================================= */

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--color-primary-deep);
  color: var(--color-bg);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  z-index: var(--z-modal);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:hover { color: var(--color-bg); }
.skip-link:focus,
.skip-link:focus-visible { top: 16px; }

/* 視覚的に隠す（A11y） */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   SVGアイコン共通
   ========================================================= */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}


/* =========================================================
   テキストユーティリティ（最小限）
   ========================================================= */
.text-mute    { color: var(--color-text-mute); }
.text-soft    { color: var(--color-text-soft); }
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }

.text-en {
  font-family: var(--font-en);
  letter-spacing: var(--ls-widest);
}

.text-display-en {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
}

.text-caps {
  font-size: var(--text-caption);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-text-mute);
}