/* ════════════════════════════════════════════════════════════════
   ensemBlog Design System — base.css
   Phase A: 共通デザイントークンと最小限のリセット・タイポ基盤のみ。

   方針:
   - LP v3.1 (output/lp_prototype_v3_1.html) のトークンを正典として抽出。
   - 既存テンプレ (index/result/guide/beta_manual) は Bootstrap 5.3 + インライン
     スタイルで動いており、本ファイルを読み込んでも既存見た目は変えない設計。
     CSS 変数と少数の .ens-* ユーティリティだけを露出する。
   - Phase B 以降で .ens-* を順次採用し、最終的にインライン CSS を削減する。

   読み込み順 (推奨):
   1) Google Fonts (Manrope + Noto Sans JP)
   2) Bootstrap 5.3 CDN
   3) base.css (このファイル)
   4) ページ固有スタイル

   注意: ここでは body / h1 等のグローバル要素を上書きしない。
         既存テンプレの Bootstrap 既定タイポを尊重。
         Phase B のヒーロー刷新時に .ens-hero などのスコープ付きで上書きする。
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (v3.1 正典) ───────────────────────────── */
  --ens-navy:        #0B3D91;
  --ens-navy-deep:   #062463;
  --ens-navy-soft:   #2456B5;
  --ens-sky:         #6AA9FF;
  --ens-sky-tint:    #E8F0FE;

  --ens-coral:       #FF6B35;
  --ens-coral-soft:  #FFE8DC;
  --ens-amber:       #FFB02E;
  --ens-amber-soft:  #FFF4D6;

  --ens-ink:         #1A1F2E;
  --ens-ink-soft:    #4A5468;
  --ens-ink-mute:    #7C8499;
  --ens-rule:        #E4E7EF;

  --ens-cream:       #FAF7F2;
  --ens-paper:       #FFFFFF;
  --ens-night:       #0A1428;

  --ens-green:       #00B86B;

  /* ── Typography ────────────────────────────────────── */
  --ens-font-display: 'Manrope', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --ens-font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'YuGothic', sans-serif;
  --ens-font-hand:    'Caveat', cursive;
  --ens-font-mega:    'Bebas Neue', 'Manrope', sans-serif;

  /* ── Type Scale (v3.1 hero/section 基準) ────────────── */
  --ens-fs-hero:    clamp(2.6rem, 7vw, 4.8rem);   /* H1 hero */
  --ens-fs-sec:     clamp(2rem, 4.8vw, 3.4rem);   /* H2 section title */
  --ens-fs-sub:     clamp(1.3rem, 2.4vw, 1.7rem); /* H3 */
  --ens-fs-body:    1rem;
  --ens-fs-lead:    1.04rem;
  --ens-fs-small:   .82rem;
  --ens-fs-mini:    .72rem;

  --ens-lh-tight:   1.14;
  --ens-lh-base:    1.85;
  --ens-lh-lead:    1.95;

  /* ── Spacing rhythm ────────────────────────────────── */
  --ens-space-1:    4px;
  --ens-space-2:    8px;
  --ens-space-3:    12px;
  --ens-space-4:    16px;
  --ens-space-5:    24px;
  --ens-space-6:    32px;
  --ens-space-7:    48px;
  --ens-space-8:    64px;
  --ens-space-9:    88px;
  --ens-space-10:   110px;

  /* ── Radius ────────────────────────────────────────── */
  --ens-radius-sm:  8px;
  --ens-radius:     14px;
  --ens-radius-lg:  24px;
  --ens-radius-pill: 100px;

  /* ── Shadow ────────────────────────────────────────── */
  --ens-shadow-card: 0 2px 4px rgba(11,61,145,.04), 0 12px 32px rgba(11,61,145,.08);
  --ens-shadow-pop:  0 4px 12px rgba(11,61,145,.10), 0 20px 48px rgba(11,61,145,.14);
  --ens-shadow-cta:  0 8px 22px rgba(11,61,145,.28);

  /* ── Z-index ───────────────────────────────────────── */
  --ens-z-header:   100;
  --ens-z-overlay:  2000;
  --ens-z-feedback: 1000;
}

/* ──────────────────────────────────────────────────────
   Optional utility classes (.ens-*)
   既存テンプレに影響を与えないよう、明示的に class が
   ついた要素のみ装飾する。Phase B で順次採用。
   ────────────────────────────────────────────────────── */

.ens-display { font-family: var(--ens-font-display); }
.ens-body    { font-family: var(--ens-font-body); }
.ens-hand    { font-family: var(--ens-font-hand); color: var(--ens-coral); }

.ens-h1 {
  font-family: var(--ens-font-display);
  font-size: var(--ens-fs-hero);
  font-weight: 800;
  line-height: var(--ens-lh-tight);
  letter-spacing: -.015em;
  color: var(--ens-ink);
  text-wrap: balance;
  word-break: keep-all;
  line-break: strict;
}

.ens-h2 {
  font-family: var(--ens-font-display);
  font-size: var(--ens-fs-sec);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--ens-ink);
  text-wrap: balance;
}

.ens-h3 {
  font-family: var(--ens-font-display);
  font-size: var(--ens-fs-sub);
  font-weight: 700;
  color: var(--ens-ink);
}

.ens-lead {
  font-size: var(--ens-fs-lead);
  color: var(--ens-ink-soft);
  line-height: var(--ens-lh-lead);
  text-wrap: pretty;
}

.ens-eyebrow {
  font-family: var(--ens-font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--ens-navy);
  text-transform: uppercase;
}

.ens-btn-primary {
  font-family: var(--ens-font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 32px;
  background: var(--ens-navy);
  color: #fff;
  border: 0;
  border-radius: var(--ens-radius-pill);
  cursor: pointer;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
  box-shadow: var(--ens-shadow-cta);
  text-decoration: none;
}
.ens-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px rgba(11,61,145,.36);
  background: var(--ens-navy-deep);
  color: #fff;
}

.ens-btn-ghost {
  font-family: var(--ens-font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 24px;
  background: transparent;
  color: var(--ens-ink);
  border: 1.5px solid var(--ens-rule);
  border-radius: var(--ens-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s ease;
  text-decoration: none;
}
.ens-btn-ghost:hover {
  border-color: var(--ens-ink);
  background: var(--ens-paper);
  color: var(--ens-ink);
}

.ens-card {
  background: var(--ens-paper);
  border-radius: var(--ens-radius);
  box-shadow: var(--ens-shadow-card);
  border: 1px solid rgba(11,61,145,.06);
}

.ens-container        { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.ens-container-narrow { max-width: 880px;  margin: 0 auto; padding: 0 32px; }

/* テキストアクセント */
.ens-coral { color: var(--ens-coral); }
.ens-navy  { color: var(--ens-navy); }
.ens-amber { color: var(--ens-amber); }

/* Reveal アニメーション基盤 (Phase B 以降で IntersectionObserver と組み合わせ) */
.ens-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.ens-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
  .ens-reveal { transition: none; opacity: 1; transform: none; }
  .ens-btn-primary:hover { transform: none; }
}