/* ============================================================
   SalesDNA AI — Theme System (Light/Dark Auto-Switch)
   既存style.cssに追加読み込みするテーマ補強パッチ
   ブラウザのカラースキーム設定に応じて視認性を自動最適化
   ============================================================ */

/* ── 1. セマンティックトークン体系（意味ベース） ──────── */
/* ライトモード（デフォルト） */
:root {
  /* 背景層 */
  --bg-page:        #FFFFFF;  /* 最下層ページ背景 */
  --bg-surface:     #F7F8FA;  /* カード等の浮遊面 */
  --bg-elevated:    #FFFFFF;  /* 浮き上がり面 */
  --bg-muted:       #F2F4F7;  /* 控えめ面 */
  --bg-inverse:     #1E2936;  /* 反転（ダークセクション） */

  /* テキスト層（WCAG AA準拠コントラスト比4.5以上を確保） */
  --fg-primary:     #0F1722;  /* 本文強：白背景で14.8:1 */
  --fg-body:        #1E2936;  /* 本文：白背景で12.6:1 */
  --fg-secondary:   #3B4556;  /* 副次：白背景で8.9:1 */
  --fg-tertiary:    #5F6876;  /* 控えめ：白背景で5.4:1 */
  --fg-muted:       #7A8290;  /* 薄め：白背景で3.8:1（装飾のみ） */
  --fg-inverse:     #FFFFFF;  /* 反転（暗背景上） */
  --fg-inverse-secondary: rgba(255,255,255,.78);

  /* ボーダー層 */
  --border-subtle:  rgba(30,41,54,.08);
  --border-default: rgba(30,41,54,.15);
  --border-strong:  rgba(30,41,54,.25);

  /* ブランドカラー（両モード共通、コントラスト調整） */
  --brand-gold:       #B89220;  /* ライト時：白背景で4.7:1 確保 */
  --brand-gold-hover: #9A7A18;
  --brand-gold-bg:    rgba(216,174,46,.10);
  --brand-gold-border: rgba(216,174,46,.35);

  /* アクセント */
  --accent-link:       #B89220;
  --accent-link-hover: #9A7A18;

  /* シャドウ */
  --shadow-xs: 0 1px 2px rgba(15,23,34,.05);
  --shadow-sm: 0 2px 8px rgba(15,23,34,.06);
  --shadow-md: 0 4px 16px rgba(15,23,34,.08);
  --shadow-lg: 0 8px 32px rgba(15,23,34,.12);
}

/* ── 2. ダークモード（OS/ブラウザ設定自動検出） ───────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        #0E1520;
    --bg-surface:     #1A2331;
    --bg-elevated:    #212C3D;
    --bg-muted:       #1A2331;
    --bg-inverse:     #0A1018;

    /* ダークモード時のテキスト：暗背景で4.5:1以上を厳守 */
    --fg-primary:     #F4F6FA;  /* 暗背景で16:1 */
    --fg-body:        #E4E8EE;  /* 暗背景で13:1 */
    --fg-secondary:   #C5CBD6;  /* 暗背景で9:1 */
    --fg-tertiary:    #96A0B0;  /* 暗背景で5.6:1 */
    --fg-muted:       #6D7888;  /* 暗背景で3.3:1（装飾のみ） */
    --fg-inverse:     #0F1722;
    --fg-inverse-secondary: rgba(15,23,34,.78);

    --border-subtle:  rgba(255,255,255,.08);
    --border-default: rgba(255,255,255,.15);
    --border-strong:  rgba(255,255,255,.25);

    /* ダークモード時のゴールド：暗背景でより明るく */
    --brand-gold:       #E8C84A;  /* 暗背景で10:1 */
    --brand-gold-hover: #F2D970;
    --brand-gold-bg:    rgba(232,200,74,.12);
    --brand-gold-border: rgba(232,200,74,.35);

    --accent-link:       #F0D060;
    --accent-link-hover: #F5E090;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  }
}

/* ── 3. 既存style.cssの変数を上書き（後方互換） ─────── */
/* 既存のクラスが参照している古い変数名を、新セマンティックに再マップ */
:root {
  --white:       var(--bg-page);
  --off-white:   var(--bg-surface);
  --gray-100:    var(--bg-muted);
  --gray-200:    var(--border-subtle);
  --gray-300:    var(--border-default);
  --gray-400:    var(--fg-muted);
  --gray-500:    var(--fg-tertiary);
  --gray-600:    var(--fg-secondary);
  --text-main:   var(--fg-body);
  --text-sub:    var(--fg-secondary);
}

/* ダークモード時、navyを背景に使うセクションは元のまま、
   テキストを白系に強制する */
@media (prefers-color-scheme: dark) {
  :root {
    /* navy系はダークモードでもブランドとして残す */
    --navy:        #0E1520;
    --navy-dark:   #070B12;
    --navy-mid:    #1A2331;
    --navy-light:  #2A3648;
  }
}

/* ── 4. レスポンシブブレークポイント定義（統一） ─────── */
/*
   BP-XS:  ≤ 479px  （スマホ縦持ち）
   BP-SM:  480-767px （大型スマホ）
   BP-MD:  768-1023px（タブレット）
   BP-LG:  1024-1279px（小型PC）
   BP-XL:  ≥ 1280px （デスクトップ）
*/

/* ── 5. ベースタイポグラフィ補強（視認性向上） ────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--fg-body);
  background: var(--bg-page);
}

/* 既存.btn-primary等の再マッピング（ダークモード時も視認性確保） */
@media (prefers-color-scheme: dark) {
  /* 既存のlightモード前提の要素をダーク環境で補正 */
  body { background: var(--bg-page); color: var(--fg-body); }
  
  /* セクション背景の再調整 */
  .section--light,
  section[class*="--light"] {
    background: var(--bg-surface) !important;
  }
}

/* ── 6. フォーム同意チェックボックスの視認性改善 ──────── */
.form-consent {
  margin-top: 20px;
  margin-bottom: 16px;
}
.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 14px 18px;
  background: var(--brand-gold-bg);
  border: 1px solid var(--brand-gold-border);
  border-radius: 6px;
  transition: all .2s ease;
}
.consent-checkbox:hover {
  border-color: var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold) 15%, transparent);
}
.consent-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.consent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--bg-elevated);
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all .2s ease;
}
.consent-checkbox input:checked ~ .consent-mark {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
}
.consent-checkbox input:checked ~ .consent-mark::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  border: solid var(--fg-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
.consent-checkbox input:focus-visible ~ .consent-mark {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.consent-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-body);
}
.consent-text a {
  color: var(--accent-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.consent-text a:hover {
  color: var(--accent-link-hover);
}

/* ── 7. フッターリーガルナビ ──────────────────────────── */
.footer-legal-nav {
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0 0 20px 0;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-legal-nav a {
  color: rgba(255,255,255,.85);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s ease;
  padding: 4px 8px;
  border-radius: 4px;
}
.footer-legal-nav a:hover,
.footer-legal-nav a:focus-visible {
  color: var(--brand-gold);
}
.footer-legal-nav a:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 640px) {
  .footer-legal-nav {
    gap: 12px 20px;
    font-size: 12px;
  }
  .footer-bottom-row {
    flex-direction: column;
    text-align: center;
  }
}

/* ── 8. リンク・フォーカスの視認性（アクセシビリティ） ─ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 9. 選択テキストの視認性 ──────────────────────────── */
::selection {
  background: var(--brand-gold);
  color: #FFFFFF;
}

/* ── 10. ハイコントラストモード対応 ───────────────────── */
@media (prefers-contrast: more) {
  :root {
    --fg-body: #000000;
    --fg-secondary: #1A1A1A;
    --border-default: rgba(0,0,0,.5);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --fg-body: #FFFFFF;
      --fg-secondary: #EEEEEE;
      --border-default: rgba(255,255,255,.5);
    }
  }
}

/* ── 11. モーション配慮 ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── フッターレイアウト補正（代表者ブロック削除後の3カラム対応） ── */
.footer-grid {
  grid-template-columns: 1.2fr 1fr 1fr !important;
  gap: 48px !important;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    max-width: 700px;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    max-width: 100%;
    gap: 32px !important;
  }
}