/* ============================================================
   Design Tokens — PoC v2
   ------------------------------------------------------------
   このファイルは CSS 変数(カスタムプロパティ)のみを定義する。
   JSから書き換えるのは「色」のみ。それ以外(フォント・余白・
   角丸・影)は固定。これにより、カラースキーム切替時に色以外
   が動かないことを保証する。
   ============================================================ */

:root {
  /* ---- カラースキーム切替対象(JSが書き換える) ---- */
  --color-primary: #2c3e50; /* メインカラー(CTA、見出し下線等) */
  --color-primary-fg: #ffffff; /* primary 上に乗る文字色 */
  --color-accent: #e67e22; /* アクセント(強調、ボタンホバー) */
  --color-accent-fg: #ffffff;

  --color-bg: #ffffff; /* ページ背景 */
  --color-surface: #fafafa; /* カード・セクション背景（白に近い） */
  --color-surface-alt: #f5f5f5; /* 区切り用の別トーン */
  --color-primary-light: #eef2ff; /* primary の薄い版（背景・アクセント用、JSで動的更新） */

  /* ---- 新 4 軸 alias (Option 2 spec 2026-05-10 §5-1)
     Phase 1-2 では旧変数名で JS が書き込み、ここで新名に alias する.
     Phase 3 で lp.css 等を新変数名に rename する場合は逆方向 alias に変える. ---- */
  --color-main: var(--color-primary);
  --color-sub: var(--color-accent);
  --color-base: var(--color-primary-light);
  --color-key: var(--color-cta);

  --color-text: #1a1a1a; /* 本文 */
  /* 2026-06-01: surface-alt(#f5f5f5) 上 12px でも WCAG AA を確保するため
     #6b6b6b → #5f5f5f に 1 段暗く (a11y review M-1)。on #fafafa で 5.6:1. */
  --color-text-muted: #5f5f5f; /* 補助テキスト */
  --color-text-inverse: #ffffff; /* 暗背景上の白テキスト */
  --color-border: #e8e8e8;
  --color-surface-dark: #2d2d2d; /* ダーク背景（フッター、dark セクション） */

  /* ---- タイポグラフィ(固定) ---- */
  /* Noto Sans JP は Google Fonts CDN で読み込み（PoC段階、本番は Fontsource セルフホスト） */
  --font-sans: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-rounded: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-display: var(--font-sans); /* トーンによって JS で切替 */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- 余白(固定) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem; /* 2026-06-01: セクション間ゆとり (PC, design-language §2) */

  /* ---- 角丸(固定) ---- */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- 影(固定) ----
     2026-06-01 上質化: 単層 → ambient + key の多層シャドウで奥行きを出す
     (design-language「インク・ミニマル」§3)。値は淡く重ねて「浮き」を上品に. */
  --shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-md: 0 1px 2px rgba(20, 22, 28, 0.04), 0 4px 10px -2px rgba(20, 22, 28, 0.08);
  --shadow-lg: 0 2px 4px rgba(20, 22, 28, 0.04), 0 12px 28px -8px rgba(20, 22, 28, 0.14);
  --shadow-xl: 0 4px 8px rgba(20, 22, 28, 0.05), 0 24px 48px -12px rgba(20, 22, 28, 0.2);

  /* ---- セクション内部要素の間隔 ----
     2026-04-23: spacing (余白) feature 削除により --section-inner-gap token は廃止。 */

  /* ---- コンテナ(固定) ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1140px; /* LP標準幅。1024→1140に拡大 */
  --container-xl: 1280px;

  /* ---- トランジション(固定) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ---- トーン別フォントオーバーライド ----
   data-tone は .lp-page の div に付与される */
[data-tone="elegant"] {
  --font-display: var(--font-serif);
}
[data-tone="japanese"] {
  --font-display: var(--font-serif);
}
[data-tone="clean"],
[data-tone="modern"],
[data-tone="natural"],
[data-tone="bold"] {
  --font-display: var(--font-sans);
}
[data-tone="pop"] {
  --font-display: var(--font-rounded);
}
[data-tone="feminine"] {
  --font-display: var(--font-serif);
}

/* ---- 共通リセット(最小限) ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Tailwind CDN ダークモード防止（darkMode: 'class' で制御、ここでフォールバック） */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
  overflow-x: hidden; /* glow装飾等の疑似要素はみ出しを抑制 */
}

body {
  margin: 0;
  overflow-x: hidden; /* 横スクロールバーを抑制 */
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* ============================================================
   SVG フィルター定義コンテナ [H-1]
   ============================================================ */
.lp-svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================
   背景プリセット (data-bg)
   同じ属性セレクタを重ねて詳細度 (0,0,2,0) を確保し,
   lp.css / hero.css の variant クラス (`.hero--split` 等, 詳細度
   0,0,1,0) による上書きを防ぐ. CLAUDE.md 規約で `!important` 禁止.
   ============================================================ */
[data-bg="white"][data-bg] {
  background-color: #ffffff;
}
/* BUG-004: theme / dark section 内の card は `var(--color-bg)` / `var(--color-surface)` を
   背景に使うため、section 側で --color-text のみ flip させると「白背景に白文字」になる。
   親 section スコープで --color-bg / --color-surface / --color-border も対応色に上書きし
   子要素 (Solution card / Offer plan / Problem card 等) が自動追随するようにする。
   --color-bg-fallback: shorthand 互換のため別名は持たない (token は子へ inherit する)。 */
[data-bg="theme"][data-bg] {
  background-color: var(--color-primary);
  --color-text: #fff;
  /* BUG-043 (logo-bar): muted を 0.7→0.85。BUG-098: 最も明るい primary でも AA 4.5 を
     満たす 0.92 に再調整 (0.85 では #2563eb 上で 4.2 程度で未達)。 */
  --color-text-muted: rgba(255, 255, 255, 0.92);
  --color-bg: rgba(255, 255, 255, 0.08);
  /* BUG-040/042: surface を 0.12 → 0.22 に上げる (Proof bubble 吹き出し / Offer plan カード内テキストが primary 上で読めない) */
  --color-surface: rgba(255, 255, 255, 0.22);
  --color-border: rgba(255, 255, 255, 0.28);
  /* BUG-037 (再発): Hero CTA が --color-bg (透明白 0.08) を継承して primary 地に同色化していた.
     CTA 専用の不透明白を明示し、文字を primary で確定 */
  --color-cta-bg: #ffffff;
  /* BUG-041: dark/theme でも CTA ボタンの文字は白固定 (skin の cta-fg が黒のままだとピンク/ゴールド地に黒文字で見えにくい) */
  --color-cta-fg: #fff;
}
[data-bg="theme-light"][data-bg] {
  background-color: var(
    --color-primary-light
  ); /* 本文色は default (--color-text: #1a1a1a) のまま。 BUG-012: 定義欠落により中間トーンで背景色が付かなかった回帰防止 */
  /* BUG-040: theme-light でも Proof bubble の吹き出しが薄すぎる対策 (default surface は #fafafa で OK だが念のため明示) */
  --color-surface: #ffffff;
  --color-border: rgba(0, 0, 0, 0.12);
}
[data-bg="dark"][data-bg] {
  background-color: #1a1a1a;
  --color-text: #fff;
  /* BUG-098: muted を 0.85→0.92 に揃える (theme/solid と統一、AA 確保)。 */
  --color-text-muted: rgba(255, 255, 255, 0.92);
  --color-bg: #2d2d2d;
  --color-surface: #242424;
  --color-border: rgba(255, 255, 255, 0.15);
  /* BUG-037 系: dark 地 + 暗カラーボタン (ryokan 黒等) で同色化を防ぐ専用 token */
  --color-cta-bg: #ffffff;
  /* BUG-041: dark で CTA ボタンの文字色を白に強制 (skin の cta-fg=黒のままだと暗背景に色付きボタン+黒文字で沈む) */
  --color-cta-fg: #fff;
}

/* ============================================================
   装飾 (data-decor) — ::before 疑似要素
   z-index 整理: ::before(decor, z:0) → コンテンツ(z:auto) → ::after(texture, z:1)
   ============================================================ */
[data-decor]:not([data-decor="none"]) {
  position: relative;
}

[data-decor]:not([data-decor="none"])::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

[data-decor="glow"]::before {
  background: radial-gradient(ellipse at 85% 15%, var(--color-primary-light) 0%, transparent 60%);
  opacity: 0.4;
}

[data-decor="glow-dual"]::before {
  background:
    radial-gradient(ellipse at 85% 15%, var(--color-primary-light) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 85%, var(--color-accent) 0%, transparent 50%);
  opacity: 0.3;
}

[data-decor="spotlight"]::before {
  background: radial-gradient(ellipse at 50% 0%, var(--color-primary-light) 0%, transparent 70%);
  opacity: 0.35;
}

[data-decor="inner-glow"]::before {
  box-shadow: inset 0 0 80px 20px var(--color-primary-light);
  opacity: 0.3;
}

/* コンテンツが疑似要素に隠れないよう stacking context を確立 */
.lp-container,
.hero__inner,
.hero__text,
.hero__media {
  position: relative;
  z-index: 1;
}