/* ==========================================================
   WindCrewOrchestra — Design Tokens v1.0
   本ファイルが CSS 変数の実体 (docs/design-system.md ⑥ 参照)。
   ========================================================== */
:root {
  /* ---- 色: 原色値(この一覧にない色は使わない) ---- */
  /* 空色系 — 面=500 / 線=600 / 文字=800 */
  --sky-50:  #F2F9FC;   /* セクション交互背景 */
  --sky-100: #DFF1F9;   /* 淡い強調面 */
  --sky-400: #5FBCE3;   /* 空色ボタンの hover(明るく) */
  --sky-500: #36ABDB;   /* ★主役。塗り・面で使う */
  --sky-600: #2399C7;   /* 線・下線・枠(白地3:1の最小濃度) */
  --sky-800: #1A769B;   /* リンク文字・フォーカス(白地5.1:1) */

  /* 橙系 — 行動箇所専用。淡色トークンは意図的に作らない */
  --orange-500: #D9772A;  /* ★CTA塗りのみ */
  --orange-600: #C4671F;  /* CTA hover */
  --orange-700: #A85618;  /* 小さい文字で橙が要る時の唯一の値(5.2:1) */

  /* 墨系(中立色) — 墨と同じわずかな青みで統一 */
  --ink-900: #2C3133;   /* 本文・見出し・フッター背景 */
  --ink-700: #555E63;   /* 補助テキスト(6.6:1) */
  --ink-500: #6B757A;   /* 日付・注記(4.7:1)。文字に使える最薄 */
  --ink-300: #9AA6AC;   /* disabled・装飾のみ(文字には使わない) */
  --ink-100: #D9E3E8;   /* 罫線・カード枠 */
  --ink-50:  #F2F5F6;   /* disabled背景 */
  --white:   #FFFFFF;

  --red-error: #B3402A; /* フォームエラー文のみ(橙と同族の煉瓦色) */

  /* ---- 色: 役割名(実装はこちらを参照) ---- */
  --color-bg:            var(--white);
  --color-bg-section:    var(--sky-50);
  --color-text:          var(--ink-900);
  --color-text-sub:      var(--ink-700);
  --color-text-muted:    var(--ink-500);
  --color-border:        var(--ink-100);
  --color-primary:       var(--sky-500);
  --color-primary-hover: var(--sky-400);
  --color-line:          var(--sky-600);
  --color-link:          var(--sky-800);
  --color-accent:        var(--orange-500);
  --color-accent-hover:  var(--orange-600);
  --color-accent-text:   var(--orange-700);
  --color-focus:         var(--sky-800);
  --color-error:         var(--red-error);
  --color-footer-bg:     var(--ink-900);
  --color-footer-text:   var(--sky-50);
  --color-footer-sub:    #B8C4C9;  /* フッター二次情報(墨地7.4:1) */

  /* ---- 書体 ---- */
  --font-heading: "RocknRoll One", "Noto Sans JP", sans-serif; /* 400のみ存在 */
  --font-body:    "Noto Sans JP", sans-serif;                  /* 400/700のみ使用 */

  /* ---- 文字サイズ(スマホ値。768px以上で上書き) ---- */
  --fs-display: clamp(24px, 8vw, 48px);   /* ヒーロー見出し専用 */
  --fs-h1:      30px;
  --fs-h2:      24px;
  --fs-h3:      20px;
  --fs-h4:      18px;
  --fs-lead:    18px;
  --fs-body:    16px;   /* 最小本文サイズ(確定事項) */
  --fs-caption: 14px;   /* システム全体の最小値 */

  --lh-display: 1.3;
  --lh-heading: 1.4;
  --lh-lead:    1.8;
  --lh-body:    1.9;    /* 日本語長文向けの広め */
  --lh-caption: 1.6;

  /* ---- 余白(8pxグリッド: この7値のみ) ---- */
  --space-8:  8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* ---- レイアウト ---- */
  --container:     1120px;  /* 8×140。カード3列が痩せない幅 */
  --measure:       640px;   /* 本文列 = 16px×40字ちょうど */
  --container-pad: var(--space-24);

  /* ---- 形・影 ---- */
  --radius-8:    8px;       /* 入力欄・小画像 */
  --radius-16:   16px;      /* カード・画像 */
  --radius-pill: 999px;     /* ボタン(押せるもの=最も丸い) */
  --shadow-lift: 0 4px 12px rgba(44, 49, 51, 0.12); /* hover時のみ */

  /* ---- 部品寸法(8の倍数・指が届く44px以上) ---- */
  --btn-h:     48px;
  --btn-h-cta: 56px;
  --input-h:   48px;

  /* ---- 動き ---- */
  --duration: 0.2s;
  --easing:   ease;

  /* ---- 重なり順 ---- */
  --z-overlay: 200;
}

/* 唯一のブレークポイント: 768px(これ以外は作らない) */
@media (min-width: 768px) {
  :root {
    --fs-h1:      40px;
    --fs-h2:      32px;
    --fs-h3:      24px;
    --fs-h4:      20px;
    --container-pad: var(--space-32);
  }
}

/* ---- 横はみ出し防止 (#139) ---- */
/* overflow は stacking context を作らない。root の clip は viewport への hidden 相当として適用され、position:fixed 要素は viewport 基準のため影響なし */
html {
  overflow-x: clip;
}

/* ---- 基本スタイル雛形 ---- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400; /* RocknRoll Oneは400のみ。太字指定は擬似太字で滲むため禁止 */
  line-height: var(--lh-heading);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.5;
}
p + p { margin-top: var(--space-24); }
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}