/*
 * 9d9 Design System — Components CSS v0.1（M4 draft）
 * 依存: tokens/generated/css/tokens.css（先に読み込むこと）
 * 仕様: docs/05-components/draft-button-link-card.md
 * a11y: WCAG 2.2 AA（DS-D012）— focus ring 2px/offset 2px、target size 24px+
 */

/* ---------- Button ---------- */
.d9-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dimension-space-200);
  min-height: 44px; /* target size余裕（2.5.8最小24pxを上回る） */
  padding: var(--dimension-space-300) var(--dimension-space-500);
  border: none;
  border-radius: var(--radius-interactive);
  background: var(--color-action-primary-default);
  color: var(--color-text-on-action);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-wider);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-state-duration) var(--motion-state-easing);
}
.d9-button:hover { background: var(--color-action-primary-hover); }
.d9-button:active { background: var(--color-action-primary-active); }
.d9-button:focus-visible {
  outline: var(--dimension-focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}
.d9-button:disabled {
  background: var(--color-border-subtle);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
/* secondary（茜の枠線・静かな選択肢） */
.d9-button--secondary {
  background: transparent;
  color: var(--color-action-primary-default);
  border: 1px solid var(--color-action-primary-default);
}
.d9-button--secondary:hover { background: var(--color-akane-50); color: var(--color-action-primary-hover); }
.d9-button--secondary:active { background: var(--color-akane-100); color: var(--color-action-primary-active); }

/* ---------- Link ---------- */
.d9-link {
  color: var(--color-link-default);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  border-radius: var(--radius-100);
}
.d9-link:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
.d9-link:focus-visible {
  outline: var(--dimension-focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
  text-decoration: none;
}
.d9-link:visited { color: var(--color-action-primary-active); }

/* ---------- Card ---------- */
.d9-card {
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  padding: var(--dimension-space-500);
}
.d9-card--raised { border: none; box-shadow: var(--elevation-raised); }
.d9-card__title {
  margin: 0 0 var(--dimension-space-300);
  font-size: var(--font-size-heading-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.d9-card__body {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-s);
  line-height: var(--font-leading-relaxed);
}
/* カード全体リンク（内部にリンクを1つだけ持つ場合） */
.d9-card--interactive { transition: box-shadow var(--motion-state-duration) var(--motion-state-easing); }
.d9-card--interactive:hover { box-shadow: var(--elevation-raised); }
.d9-card--interactive:focus-within {
  outline: var(--dimension-focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- Card image slot（DS-M4-F02・DS-D055 approved scope） ---------- */
/* additive class群。media DOMを置かないCardには一切適用されず、既存DOM・余白・挙動を変えない。
   contract: 画像は natural 16:9 + contain。intrinsic width/height をHTML側で必須とし、
   aspect-ratioで領域予約してCLS 0を維持する（DS-D054 budget）。4:3へ自動cropしない（DS-D051/D052） */
.d9-card__media {
  margin: 0 0 var(--dimension-space-300);
}
.d9-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: var(--color-surface-default);
  border-radius: var(--radius-100);
}
.d9-card__caption {
  margin: var(--dimension-space-200) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}
/* linked Card: root aだけを唯一のinteractive要素とする（single-link contract・DS-D052） */
a.d9-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* single-link focusはroot :focus-visible を根拠にする（:focus-within 単独に依存しない） */
a.d9-card--interactive:focus-visible {
  outline: var(--dimension-focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ========== v0.2 追加（draft・承認待ち）: Form / Header / Footer ========== */

/* ---------- Form field ---------- */
.d9-field { display: block; margin-bottom: var(--dimension-space-500); }
.d9-field__label {
  display: block;
  margin-bottom: var(--dimension-space-100);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.d9-field__required { color: var(--color-status-danger); margin-left: 2px; }
.d9-field__help {
  margin-top: var(--dimension-space-100);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}
.d9-input, .d9-textarea, .d9-select {
  width: 100%;
  min-height: 44px;
  padding: var(--dimension-space-300);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-interactive);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-m);
  line-height: var(--font-leading-normal);
}
.d9-textarea { min-height: 120px; resize: vertical; }
.d9-input::placeholder, .d9-textarea::placeholder { color: var(--color-text-secondary); }
.d9-input:focus-visible, .d9-textarea:focus-visible, .d9-select:focus-visible {
  outline: var(--dimension-focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 1px;
  border-color: var(--color-action-primary-default);
}
/* エラー状態: 色だけに頼らない（枠+背景+アイコン+文言） */
.d9-field--error .d9-input,
.d9-field--error .d9-textarea,
.d9-field--error .d9-select { border-color: var(--color-status-danger); background: var(--color-surface-danger-subtle); }
.d9-field__error {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: var(--dimension-space-100);
  font-size: var(--font-size-caption);
  color: var(--color-status-danger);
}
.d9-field__error::before { content: "⚠"; }

/* ---------- Header ---------- */
.d9-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dimension-space-500);
  padding: var(--dimension-space-400) var(--dimension-space-500);
  background: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-subtle);
}
.d9-header__brand { display: flex; align-items: center; gap: var(--dimension-space-300); text-decoration: none; color: var(--color-text-primary); font-weight: var(--font-weight-bold); letter-spacing: .04em; }
.d9-header__nav { display: flex; gap: var(--dimension-space-500); }
.d9-header__link {
  color: var(--color-text-primary); text-decoration: none; font-size: 0.9375rem;
  padding: var(--dimension-space-200) 0;
  border-bottom: 2px solid transparent;
}
.d9-header__link:hover { color: var(--color-link-hover); }
.d9-header__link[aria-current="page"] { border-bottom-color: var(--color-action-primary-default); font-weight: var(--font-weight-medium); }
.d9-header__link:focus-visible { outline: var(--dimension-focus-ring-width) solid var(--color-focus-ring); outline-offset: 2px; }

/* ---------- Footer ---------- */
.d9-footer {
  padding: var(--dimension-space-700) var(--dimension-space-500);
  background: var(--color-surface-paper);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-s);
}
.d9-footer__nav { display: flex; flex-wrap: wrap; gap: var(--dimension-space-400) var(--dimension-space-500); margin-bottom: var(--dimension-space-500); }
.d9-footer a { color: var(--color-text-secondary); }
.d9-footer a:hover { color: var(--color-text-primary); }
.d9-footer__legal { font-size: var(--font-size-caption); }