/*
  base.css — リセットと型スケール

  ① これは何か: ブラウザ既定値のリセットと、design-system/foundations/typography.md の
     型スケール（Title / Body / Note / Label）をクラスにしたもの。
  ② なぜここにあるか: コンポーネントやページの CSS が文字サイズ・太さを個別に持たず、
     ここで定義した 15 段階の型だけを使うようにするため。
  ③ 前提: font-size は 12/14/16/18/20/24 の 6 段階、font-weight は 400/700 のみ。
  ④ 詳細: design-system/foundations/typography.md
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

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

img, svg {
  display: block;
  max-width: 100%;
}

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

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

a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--brand-secondary);
}

code, kbd, pre {
  font-family: var(--font-mono);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 型スケール（typography.md 完全版） ---------- */
.t-xl { font-size: var(--fs-24); font-weight: var(--fw-regular); line-height: var(--lh-title); letter-spacing: var(--ls-title); color: var(--text-primary); }
.t-l  { font-size: var(--fs-18); font-weight: var(--fw-bold);    line-height: var(--lh-title); letter-spacing: var(--ls-title); color: var(--text-primary); }
.t-m  { font-size: var(--fs-16); font-weight: var(--fw-bold);    line-height: var(--lh-title); color: var(--text-primary); }
.t-s  { font-size: var(--fs-14); font-weight: var(--fw-bold);    line-height: var(--lh-title); color: var(--text-primary); }

.body-m { font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.body-m-b { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: var(--lh-body); }
.body-s { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.body-s-b { font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: var(--lh-body); }

.note-m { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-note); }
.note-s { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: var(--lh-note); }

.label-m { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-label); }
.label-m-b { font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: var(--lh-label); }
.label-s { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: var(--lh-label); }
.label-s-b { font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: var(--lh-label); }

.num { font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: var(--lh-label); }

.text-secondary { color: var(--text-secondary); }
.text-primary { color: var(--text-primary); }

/* ---------- 汎用レイアウト ---------- */
.stack > * + * { margin-top: var(--m); }     /* コンテンツ内のセクション間 16px */
.stack-l > * + * { margin-top: var(--l); }   /* コンテンツ間 24px */
.stack-s > * + * { margin-top: var(--s); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s);                              /* 同一グループのボタン間 8px */
}

.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--l);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--l);
}

@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* 淡い地の区画では補助テキストを 1 段濃く（color.md「面が自分の補助テキスト色を宣言する」） */
.section--sunken {
  background: var(--neutral-gray-1);
  --text-secondary: var(--neutral-gray-6);
}

.section--sunken .card {
  --text-secondary: var(--neutral-gray-5);
}