/* =========================================================
   base.css — リセット補完・タイポグラフィ・レイアウト基礎
   依存: tokens.css（先に読み込まれること。enqueue.phpで保証）

   タイポグラフィ14クラスは Figma テキストスタイルと1:1。
   ページ固有の調整は pages.css、部品は components.css へ。
   ========================================================= */

/* ---- ベース ---- */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.8; /* JP/Body 180% */
  color: var(--color-text-primary);
  background: var(--color-bg-page);
}

a {
  text-decoration: none;
}

a:hover {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

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

p {
  margin: 0;
}

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

/* =========================================================
   タイポグラフィ（Figmaテキストスタイル14種と1:1）
   ========================================================= */

/* 英字ディスプレイ（Lora Medium） */
.display-hero,
.display-l,
.display-m,
.display-s,
.display-xs {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
}

.display-hero { font-size: var(--text-display-hero); line-height: 1.1; }
.display-l    { font-size: var(--text-display-l); line-height: 1.15; }
.display-m    { font-size: var(--text-display-m); }
.display-s    { font-size: var(--text-display-s); }
.display-xs   { font-size: var(--text-display-xs); }

/* 日本語（Noto Sans JP） */
.jp-heading {
  font-size: var(--text-jp-heading);
  font-weight: 700;
  line-height: 1.6;
}

.label-l {
  font-size: var(--text-label-l);
  font-weight: 500;
  line-height: 1.5;
}

.body-text {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.8;
}

.nav-text {
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1.5;
}

.button-text {
  font-size: var(--text-button);
  font-weight: 500;
  line-height: 1.5;
}

.body-s {
  font-size: var(--text-body-s);
  font-weight: 400;
  line-height: 1.7;
}

.label-s {
  font-size: var(--text-label-s);
  font-weight: 500;
  line-height: 1.5;
}

.caption {
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.6;
}

.tag {
  font-size: var(--text-tag);
  font-weight: 500;
  line-height: 1.4;
}

/* =========================================================
   レイアウト基礎
   ========================================================= */

/* 全幅コンテナ（1440基準・左右48px） */
.container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* 白カード（角丸24・面色surface）— 各ページの大枠 */
.surface-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
}

/* セクションの縦リズム */
.section {
  padding-block: var(--space-4xl);
}

/* テキスト色ユーティリティ */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-inverse   { color: var(--color-text-inverse); }
.text-accent    { color: var(--color-accent-primary); }
.text-error     { color: var(--color-feedback-error); }

/* ---- SP（〜767px） ---- */
@media (max-width: 767px) {
  :root {
    --layout-gutter: 16px;
    /* SPのディスプレイ縮小（SP実デザイン準拠: PageTitleはPC同等サイズのため
       個別ページで調整。Heroのみ縮小が必要なら pages.css で対応） */
  }
}