/**
 * Base Styles
 *
 * 素の HTML 要素 (body, headings, links, paragraphs 等) の基本スタイル。
 * Design System v1.2 のトークンを参照して、サイト全体のタイポグラフィを揃える。
 *
 * @package JobJepang
 */

html {
  font-size: 100%;
}

body {
  font-family: var(--jj-font-family-jp);
  font-size: var(--jj-text-md);
  line-height: var(--jj-leading-relaxed);
  color: var(--jj-text-primary);
  background: var(--jj-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   HEADINGS
   v1.4 §1.4.x:
   - JP は文字密度が高いため line-height はやや詰める
   - 見出しは Phase 4-5 でモック値に合わせ微調整可能
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jj-font-family-jp);
  color: var(--jj-text-primary);
  line-height: var(--jj-leading-tight);
  font-weight: var(--jj-font-bold);
}

h1 {
  font-size: var(--jj-text-4xl);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--jj-text-3xl);
  letter-spacing: -0.005em;
}

h3 { font-size: var(--jj-text-2xl); }
h4 { font-size: var(--jj-text-xl); }
h5 { font-size: var(--jj-text-lg); }
h6 { font-size: var(--jj-text-md); }

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--jj-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--jj-transition-fast);
}

a:hover {
  color: var(--jj-primary-dark);
}

/* ============================================================
   FOCUS — A11Y
   v1.4 §9.5: マウス操作時はアウトライン抑制、キーボード時は明確に表示
   ============================================================ */

*:focus {
  outline: var(--jj-focus-outline);
  outline-offset: var(--jj-focus-outline-offset);
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: var(--jj-focus-outline);
  outline-offset: var(--jj-focus-outline-offset);
}

/* ============================================================
   PARAGRAPHS / LISTS
   ============================================================ */

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

li + li {
  margin-top: 0.25em;
}

/* ============================================================
   IMAGES / FIGURES
   ============================================================ */

img {
  border-radius: var(--jj-radius-md);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--jj-space-2);
  font-size: var(--jj-text-sm);
  color: var(--jj-text-muted);
}

/* ============================================================
   SELECTION
   ============================================================ */

::selection {
  background: var(--jj-primary);
  color: var(--jj-text-on-primary);
}