/* ==========================================================================
   base.css — デザイントークン・タイポグラフィ・共通レイアウト
   すべての色・余白・書体はここに集約し、各所は変数を参照する。
   ========================================================================== */

:root {
  /* --- ブランドカラー（紫→青→緑グラデーション） --- */
  --color-purple: #6f2c91;
  --color-blue:   #0093c2;
  --color-teal:   #00a88c;
  --grad-brand: linear-gradient(90deg, #6f2c91 0%, #0093c2 50%, #00a88c 100%);
  --grad-brand-diagonal: linear-gradient(120deg, #6f2c91 0%, #0093c2 55%, #00a88c 100%);

  /* --- アクセント（矢印・リンク等。メニューのパープル） --- */
  --color-accent: #6a2da8;

  /* --- テキスト・背景・罫線 --- */
  --color-bg:        #ffffff;
  --color-text:      #2b2f33;   /* 本文 */
  --color-text-muted:#667780;   /* 補助テキスト（案2 ink） */
  --color-text-inverse: #ffffff;
  --color-line:      #e2e5e7;   /* 区切り線 */
  --color-rule:      #8a8a8a;   /* 罫線グリッド（MESSAGE のタイル格子・小見出しの罫） */
  --color-surface:   #f5f6f7;   /* 淡いグレー面（案2 背景系） */
  --color-page:      #f2f4f6;   /* ファーストビューの地色（MV〜バナー〜リード共通） */
  --color-plum:      #2d2733;   /* ご寄附セクションの暗いプラム地色（デザイン準拠） */

  /* --- メインビジュアル（案2 グレー系）専用トークン ---
     地色（--color-page）の上に中央の白グローを重ねる。グローは縁に届く前に透明化するので、
     MVの下端・左右端は一様に地色 → バナー/リードと完全に同色で継ぎ目が出ない。 */
  --mv-bg:
    radial-gradient(120% 78% at 50% 24%, #ffffff 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 72%),
    var(--color-page);

  /* --- 書体 ---
     明朝（頻発）: Noto Serif JP ／ 英字あしらい: Outfit ／ 本文ゴシック: システム日本語ゴシック */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en:    "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-sans:  "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", -apple-system, sans-serif;

  /* --- タイポグラフィスケール --- */
  --fs-body:  1rem;      /* 16px */
  --fs-small: 0.8125rem; /* 13px */
  --lh-body:  1.9;
  --lh-heading: 1.25;

  /* --- 余白スケール（8pxベース） --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* セクションの縦余白。--space-section-lg は標準の約 135%（HISTORY / DATA /
     MESSAGE のようにコンテンツの切り替わりをはっきり見せたい境界で使う） */
  --space-section: clamp(3.5rem, 9vw, 7rem);
  --space-section-lg: clamp(4.75rem, 12vw, 9.5rem);

  /* --- レイアウト --- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* --- その他 --- */
  --header-h: 104px;   /* ヘッダー上部に余白を確保（ロゴ・ボタンが下寄りに座る） */
  --z-header: 50;
  --z-menu: 80;
  --z-cursor: 90;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   ベース要素
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* リンク：フォーカス可視 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   共通レイアウトユーティリティ
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-section); }

/* 隣接セクションとの境界を標準より広く取るための修飾子 */
.section--gap-top    { padding-top: var(--space-section-lg); }
.section--gap-bottom { padding-bottom: var(--space-section-lg); }

/* スクリーンリーダー専用 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* グラデーション文字（見出しのあしらい） */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* セクション見出し（PROJECT / HISTORY 等の英字ラベル＋和文サブ） */
.section-heading { text-align: center; }
.section-heading__en {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
}
.section-heading__ja {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
}

/* 暗い背景セクション用（HISTORY 等）：英字は白ベタ、和文は淡い白 */
.section-heading--inverse .section-heading__en { color: var(--color-text-inverse); }
.section-heading--inverse .section-heading__ja { color: rgba(255, 255, 255, 0.72); }