/* ==========================================================================
   LP Design Harness — Core Tokens
   ==========================================================================
   2層構造:
     1. プリミティブトークン … 生の値。テーマから参照してよいが、上書き禁止。
     2. セマンティックトークン契約 … テーマ(tokens/themes/*.css)が上書きする公開API。
        ここでのデフォルト値 = 標準テーマ「corporate」(信頼感のあるブルー)。
   コンポーネント/セクションのCSSは、原則セマンティックトークンのみを参照すること。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. プリミティブトークン(上書き禁止)
     ------------------------------------------------------------------ */

  /* --- フォントスタック --- */
  --font-sans-jp: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-serif-jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
    "MS PMincho", serif;

  /* --- タイプスケール(fluid: モバイル→デスクトップで滑らかに拡大) --- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.07rem + 0.6vw, 1.4375rem);
  --text-2xl: clamp(1.375rem, 1.18rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --text-4xl: clamp(2.125rem, 1.62rem + 2.5vw, 3.375rem);
  --text-5xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem); /* ステートメント型ヒーロー用 */

  /* --- 行間・字間(日本語前提) --- */
  --leading-tight: 1.35;  /* 見出し用 */
  --leading-normal: 1.6;
  --leading-loose: 1.9;   /* 本文用 */
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* --- スペーシング(4pxベース) --- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* セクションの上下余白(画面幅に応じて伸縮) */
  --section-space: clamp(4rem, 9vw, 7rem);

  /* --- 角丸 --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* --- 影 --- */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14);

  /* --- レイアウト --- */
  --container-max: 70rem;      /* 1120px */
  --container-narrow: 46rem;   /* 736px: FAQ・フォームなど読み物系 */
  --container-pad: clamp(1.25rem, 4vw, 2rem);

  /* --- z-index --- */
  --z-header: 100;
  --z-modal: 1000;

  /* --- モーション --- */
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ------------------------------------------------------------------
     2. セマンティックトークン契約(テーマが上書きするAPI)
        デフォルト = corporate テーマ
     ------------------------------------------------------------------ */

  /* ブランドカラー */
  --color-primary: #1d4ed8;        /* ブランドの主色 */
  --color-primary-strong: #1e40af; /* hover / active */
  --color-primary-soft: #eef4ff;   /* 薄い背景・タグ */
  --color-on-primary: #ffffff;     /* primary上の文字色 */

  /* CTAカラー(コンバージョンボタン専用。ブランド色と区別して目立たせる) */
  --color-cta: #ea580c;
  --color-cta-strong: #c2410c;
  --color-on-cta: #ffffff;

  /* マーカー(蛍光ペン風の文字強調) */
  --color-marker: #fde047;

  /* ベースカラー */
  --color-bg: #ffffff;        /* ページ背景 */
  --color-bg-alt: #f4f6fa;    /* 交互セクションの背景 */
  --color-surface: #ffffff;   /* カード背景 */
  --color-text: #1f2937;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;

  /* 状態 */
  --color-success: #16a34a;
  --color-danger: #dc2626;

  /* ヒーロー背景 */
  --gradient-hero: linear-gradient(135deg, #eef4ff 0%, #ffffff 50%, #f0f7ff 100%);

  /* テーマの性格(タイポグラフィ・形状・レイアウト) */
  --font-heading: var(--font-sans-jp);
  --font-body: var(--font-sans-jp);
  /* 角丸は4値シェアハンド可(例: 28px 10px 28px 10px で有機的な非対称角丸) */
  --radius-button: var(--radius-full);
  --radius-card: var(--radius-lg);
  --shadow-card: var(--shadow-md);
  /* セクション見出しの寄せ: center | left(エディトリアル系テーマはleft推奨) */
  --heading-align: center;
}