/* base.css — tsunagi-web の土台（トークンの変数だけを使う。見た目の個性は site.css で作る）
   ・要素の既定の余白に頼らない（WordPress・Figma・STUDIO に移しても崩れにくくするため）
   ・日本語の文字組み（行間・字間・禁則・見出しの改行）を最初から入れる */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-brand-strong); text-underline-offset: .2em; }
strong, b { font-weight: var(--fw-strong); }
small { font-size: var(--fs-small); }

/* フォーカスは必ず見えるように */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

/* 器 */
.l-container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.l-wide { width: min(100% - var(--gutter) * 2, var(--container-wide)); margin-inline: auto; }
.l-narrow { width: min(100% - var(--gutter) * 2, var(--container-narrow)); margin-inline: auto; }
.l-measure { max-width: var(--measure); }

/* セクションの上下余白（内容の区切りの強さで選ぶ） */
.s { padding-block: var(--section-normal); }
.s--tight { padding-block: var(--section-tight); }
.s--loose { padding-block: var(--section-loose); }
.s--surface2 { background: var(--color-surface2); }
.s--brand { background: var(--color-brand); color: var(--color-on-brand); }
.s--brand a:not(.btn) { color: inherit; }

/* ボタン（主・副の2種まで）。WordPress では theme.json の button と is-style-outline に対応 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: var(--radius-button);
  background: var(--color-brand-button); color: var(--color-on-brand);
  font: inherit; font-weight: var(--fw-strong); letter-spacing: .04em; font-feature-settings: "palt" 1;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--color-brand-button) 86%, #000); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn--outline { background: transparent; color: var(--color-brand-strong); border-color: currentColor; }
.btn--outline:hover { background: color-mix(in oklab, var(--color-brand) 8%, transparent); }
.s--brand .btn { background: var(--color-on-brand); color: var(--color-brand); }

/* フォーム */
label { display: block; font-weight: var(--fw-strong); margin-bottom: 6px; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 16px;
}
textarea { min-height: 140px; }

/* 読み上げだけに出す */
.u-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}