/* =========================================================
   AI駆動 LP — Design Tokens (Phase 1 draft)
   使用ルール: 色・余白・字サイズ・角丸はこの変数のみ使用。
   マジックナンバーの直書き禁止。影は当面使わない（罫線で表現）。
   WordPress: css/tokens.css として最初に読み込む想定。
   ========================================================= */
:root {
  /* ---------- Color ---------- */
  /* Brand primary(navy) — 主CTA・リンク・強調のみ。背景の全面塗りは最小限 */
  --c-accent:        #15317c; /* 濃紺（白背景でAA/AAA。CTA・リンク・見出し強調） */
  --c-accent-hover:  #0f2560; /* さらに濃い紺（hover/active） */
  --c-on-accent:     #ffffff; /* 紺の上の文字 */

  /* Brand secondary(cyan) — 装飾・ハイライトのみ。白背景の「文字・リンク」には使わない */
  --c-accent-2:      #6dc7dd; /* シアン（下線・図形アクセント・面） */
  --c-accent-2-ink:  #14181f; /* シアン面の上の文字は濃色 */
  --c-accent-weak:   #eaf6fa; /* 極薄シアン面（使用は最小限） */

  /* Neutral — 文字・背景・罫線 */
  --c-ink:    #14181f; /* 主要テキスト（見出し・本文） */
  --c-ink-2:  #4a5261; /* 副次テキスト */
  --c-ink-3:  #8a93a0; /* 補足・キャプション */
  --c-paper:   #ffffff; /* 基本背景 */
  --c-paper-2: #f6f7f9; /* セクション区切りの淡い背景 */
  --c-rule:    #e5e8ec; /* 罫線・カード境界（影の代わり） */

  /* Focus */
  --c-focus: rgba(21,49,124,.45);

  /* ---------- Typography ---------- */
  --font-jp: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-en: "Inter", var(--font-jp); /* 数字・英字ラベル用（任意） */

  /* モバイル基準（hero等はここから縮小表示） */
  --fs-h1: 32px;   --lh-h1: 1.15; --ls-h1: -0.02em;
  --fs-h2: 24px;   --lh-h2: 1.25;
  --fs-h3: 18px;   --lh-h3: 1.3;
  --fs-body: 16px; --lh-body: 1.8;   /* JP本文 ≥1.8 */
  --fs-small: 13px;--lh-small: 1.5;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing (4-based / これ以外は使わない) ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px; --s-8: 32px;  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ---------- Layout ---------- */
  --max-w: 1200px;
  --gutter: 24px;      /* mobile */
  --grid-cols: 12;
  --grid-gap: 24px;
  --section-y: 56px;   /* mobile: セクション間の縦リズム */

  /* ---------- Radius ---------- */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-none: none; /* 影は使わない。境界は --c-rule で表現 */
}

/* Desktop (≥1024px): タイプスケール拡大・余白拡張 */
@media (min-width: 1024px) {
  :root {
    --fs-h1: 48px;  --lh-h1: 1.1;
    --fs-h2: 32px;  --lh-h2: 1.2;
    --fs-h3: 20px;
    --gutter: 80px;
    --section-y: 96px;
  }
}

/* Reduced motion 尊重 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}