/* =============================================================================
 * Greco 設計ドキュメント — ブランド調整
 * アプリ本体 (apps/web) のテーマ (teal hue 170 + accent 160) に合わせる。
 * mkdocs.yml の palette.primary/accent = custom の実体。
 * ========================================================================== */

/* ---- ライトテーマ ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0c7a68;
  --md-primary-fg-color--light: #2e9a86;
  --md-primary-fg-color--dark: #075e50;
  --md-accent-fg-color: #0a8f6f;
  --md-typeset-a-color: #0b6e5e;
}

/* ---- ダークテーマ ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0f8d78;
  --md-primary-fg-color--light: #2fae97;
  --md-primary-fg-color--dark: #0b6e5e;
  --md-accent-fg-color: #2fd4b5;
  --md-typeset-a-color: #4fc3ae;
  /* 既定の青みの強い slate を少しだけ落ち着かせる */
  --md-default-bg-color: #14181d;
}

/* ---- 日本語タイポグラフィ ---- */
body {
  font-feature-settings: "palt"; /* 約物のプロポーショナル詰め */
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.md-typeset h1 {
  color: var(--md-default-fg-color);
}

/* ---- グリッドカード (トップページ) ---- */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.4rem;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.15rem 0.75rem rgba(0, 0, 0, 0.06);
}

/* ---- テーブル: 詰まりすぎを緩和し行を読みやすく ---- */
.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

/* ---- コードブロック ---- */
.md-typeset pre > code {
  border-radius: 0.3rem;
}

/* ---- モーション低減設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li {
    transition: none;
  }
}

/* ---- 全幅レイアウト (wl-307i) ----
 * material 既定の本文グリッド幅 (max-width: 61rem) を外し、画面全体を使う。
 * ヘッダー・上部タブ・本文・フッター・検索は同じ `.md-grid` を共有しているため、
 * この 1 箇所の変更が全てにそろって適用される（テーマの fork はしない）。
 * 76.25em (material 自身のブレークポイント。メディアクエリの em は初期値
 * 16px 基準なので 1220px) 未満は従来どおり（モバイルは元々全幅のため）。
 * 文字が画面端に貼り付かないよう、グリッドの内側に左右 1.2rem（material の
 * 既存リズム: サイドバー縦 padding・本文マージンと同値）を残す。
 * ただし 1220〜1268px の帯では固定余白が従来幅を削るため (R2 / PR #863 F1)、
 * padding を「余白の目標 (1.2rem) と、上限超過分の半分」の小さい方にする。
 * 本文幅 = max(従来の 61rem 上限, 全幅 − padding) となり、どの幅でも従来を
 * 下回らない（1220px では padding 0 で従来と同一、1268px から全幅+余白）。
 */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 100%;
    padding-inline: min(1.2rem, (100% - 61rem) / 2);
  }
}