/* =============================================================================
   base.css — リセット＋土台スタイル（@layer reset, base）
   -----------------------------------------------------------------------------
   役割は「素のHTMLを読みやすく整える」ことだけ。色や寸法はすべて tokens.css の
   意味トークンを参照します（生の値は書きません）。02_conventions/css.md 準拠。

   レイヤー順（後勝ち）: reset → base → tokens → components → utilities
   ※この宣言を各 CSS の冒頭に置くことで、ファイルの読み込み順に関係なく
     意図した上書き順序を固定できます（!important を使わずに解決するため）。
   ============================================================================= */

@layer reset, base, tokens, components, utilities;

/* ============================== reset レイヤー ============================== */
@layer reset {
  /* box-sizing を統一し、既定マージンを除去 */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  /* 行間・テキストサイズ調整（モバイルの自動拡大を抑制） */
  html {
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* メディア要素は既定で可変・はみ出さない（論理プロパティ） */
  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* フォーム部品はフォントを継承（ブラウザ既定の別フォントを避ける） */
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  /* 長い単語の折り返し（はみ出し防止） */
  p,
  h1,
  h2,
  h3,
  h4,
  li,
  dd,
  dt {
    overflow-wrap: break-word;
  }

}

/* ============================== base レイヤー ============================== */
@layer base {
  html {
    /* スキップリンクや本文内リンクのスクロール位置がヘッダに隠れないよう余白を確保
       （accessibility.md 2.4.11 Focus Not Obscured 対策） */
    scroll-padding-block-start: var(--space-xl);
  }

  body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);

    /* 最低でも画面高さを満たし、フッターが浮かないように */
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;

    /* 日本語の行頭・行末禁則を厳密に（句読点のぶら下がり等） */
    line-break: strict;
  }

  /* 見出し: サイズは見出しレベルではなくトークンで調整（html.md §2） */
  h1,
  h2,
  h3,
  h4 {
    color: var(--color-text-strong);
    line-height: var(--leading-heading);

    /* 日本語見出しを文節単位で折り返し、語の途中改行を防ぐ（対応ブラウザ）。
       未対応環境は既定挙動にフォールバック。text-wrap: balance で行長も均す。 */
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  h4 {
    font-size: var(--text-md);
  }

  /* 本文ブロックの下マージン（論理プロパティ） */
  p,
  ul,
  ol,
  dl,
  figure,
  blockquote {
    margin-block-end: var(--space-sm);
  }

  /* 本文の読みやすさ（行幅の上限） */
  p {
    max-inline-size: 70ch;
    text-wrap: pretty;
  }

  /* リンク: 色だけに依存せず下線を併用（accessibility.md §1.2） */
  a {
    color: var(--color-link);
    text-underline-offset: 0.15em;
  }

  a:hover {
    color: var(--color-link-hover);
  }

  /* 強調 */
  strong,
  b {
    font-weight: 700;
    color: var(--color-text-strong);
  }

  /* コード */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.95em;
  }

  /* 区切り線 */
  hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-lg);
  }

  /* 画像は比率を保ちつつ可変。装飾でも属性 width/height は HTML 側で付ける */
  img {
    block-size: auto;
  }

  /* フォーカス可視（消さない）。キーボード操作時のみ明瞭なリングを出す。
     accessibility.md §2.2 / css.md §6（コントラスト 3:1・太さ 2px 以上） */
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* main にフォーカスを移したときのリングは抑制（スキップリンク到達点） */
  main:focus {
    outline: none;
  }

  /* スクリーンリーダー専用テキスト（視覚的に隠すが読み上げは残す） */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* 動きへの配慮: OS で「視差効果を減らす」設定時はアニメ・スムーススクロールを抑制。
     これは css.md §5 / accessibility.md §2.6 が定める「安全側への上書き」であり、
     §2 の !important 原則禁止に対する明示的な例外（理由を記録）。 */
  @media (prefers-reduced-motion: reduce) {
    /* stylelint-disable declaration-no-important -- A11y例外: 全アニメ抑制のため意図的に !important（css.md §5・accessibility.md §2.6） */
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    /* stylelint-enable declaration-no-important */
  }
}