/* ============================================================
   アルペ記述読解教室 新サイト｜デザイントークン規格 v1.0
   出典: 承認済みトップページHTML（Claude Design・2026-07-13受領）からの実測抽出
   運用: 全ページの色・書体・余白は本ファイルのカスタムプロパティのみを参照する。
         インラインstyleでの直書きは禁止。値の変更は本ファイルの1箇所修正で全站に反映。
   ------------------------------------------------------------
   [変更履歴]
   v1.0.1 (M1実装時・D13ジャンプ率方針):
     --fs-hero 上限 64px → 75px（+17%）／可変係数 5.4vw → 6.2vw
     --fs-h2   上限 44px → 51px（+16%）／可変係数 3.6vw → 4.1vw
     ※ 上限のみ引き上げると一般的な1200〜1440px幅で旧上限に張り付いて
       視覚差が出ないため、可変係数も同率で調整（1200px時: hero≒74px / h2≒49px）。
       モバイル側の下限は不変。
   ============================================================ */

:root {
  /* ---- 色（臙脂=赤ペン・ブランドの主役 / 生成り=紙 / 金=勲章）---- */
  --alpe-red:        #A32433;  /* 主臙脂: 見出しアクセント・リンク・カード罫 */
  --alpe-red-deep:   #7E1420;  /* 深臙脂: ホバー・グラデ中間 */
  --alpe-red-stage:  #6E1220;  /* 舞台赤: ヒーロー/CTA帯の背景面 */
  --alpe-red-night:  #4F0C17;  /* 最深赤: 信頼帯の背景面 */
  --alpe-paper:      #F6F1E7;  /* 生成り: 基本地色・赤面上の文字色 */
  --alpe-paper-dim:  #EFE8DA;  /* 生成り影: 交互セクションの地 */
  --alpe-ink:        #221C18;  /* 墨: 本文 */
  --alpe-ink-soft:   #57504A;  /* 淡墨: 補足文 */
  --alpe-ink-faint:  #8C8378;  /* 最淡墨: キャプション・欄外 */
  --alpe-gold:       #C5A059;  /* 金: 細罫・番号・勲章的アクセントのみ（面で使わない）*/

  /* ---- 劇場型FV拡張色（承認済みプロトタイプ _劇場型_ファーストビュー.html より実測抽出）----
     用途は劇場型FV（トップS0）とブランド署名（S5）の巨大文字・舞台グラデ限定。
     本体HTML/site.cssではhex直書きせず、必ず本トークン経由で参照する。 */
  --alpe-red-bright: #B3202C;  /* 舞台ハイライト赤: FVスライド3の放射グラデ起点 */
  --alpe-red-abyss:  #2C0910;  /* 極深赤: 巨大文字(monument)の塗り（暗スライド） */
  --alpe-gold-pale:  #F4E4C1;  /* 淡金: FVスライド3のem強調文字 */
  --alpe-white:      #FFFFFF;  /* 純白: フルロゴ(img/logo.png=白地)を載せる紙片プレート専用
                                  （V6b-2・2026-07-18追加。生成り=paperとは区別する） */

  /* ---- 書体 ---- */
  --font-mincho: 'Shippori Mincho B1', serif;      /* 見出し・宣言文 */
  --font-gothic: 'Zen Kaku Gothic New', sans-serif; /* 本文・UI */
  /* 朱筆傍注専用（紙系ページ C-1/L2/L3 の赤ペン風傍注のみ。承認済みHTML(06)の
     見た目を再現するための第3書体。見出し=明朝/本文=ゴシックの原則は不変で、
     本フォントは装飾的な傍注テキスト限定で使う。M2実装時追加。 */
  --font-hand:   'Klee One', cursive;

  /* ---- 文字サイズ（流体タイポグラフィ）---- */
  --fs-hero:    clamp(30px, 6.2vw, 75px);   /* B1主見出し ※v1.0.1 ジャンプ率+17% */
  --fs-h2:      clamp(26px, 4.1vw, 51px);   /* セクション見出し ※v1.0.1 ジャンプ率+16% */
  --fs-h3:      clamp(20px, 2vw, 23px);     /* カード見出し */
  --fs-lead:    clamp(16px, 2vw, 20px);     /* リード文 */
  --fs-body:    clamp(16px, 1.7vw, 19px);   /* 本文 */
  --fs-small:   clamp(14px, 1.4vw, 17px);   /* 補足・事実1行 */
  --fs-display: clamp(120px, 22vh, 220px);  /* 装飾用特大文字（背景タイポ）*/

  /* 劇場型FV/署名の巨大文字（monument）。site.cssでのpx直書きを避けるため集約。 */
  --fs-mono-a:    clamp(150px, 30vw, 460px);  /* 巨大「国語」（FV左下） */
  --fs-mono-b:    clamp(190px, 38vw, 600px);  /* 巨大「×未来」（FV右はみ出し） */
  --fs-mono-year: clamp(120px, 26vw, 380px);  /* 巨大「2026」（FVスライド3） */
  --fs-sign:      clamp(90px,  22vw, 340px);  /* 署名S5の巨大「国語×未来」 */

  /* ---- 行間 ---- */
  --lh-tight: 1.55;  /* 大見出し */
  --lh-head:  1.6;   /* 見出し */
  --lh-body:  1.9;   /* 本文 */
  --lh-loose: 2.1;   /* リード・余裕のある本文 */

  /* ---- 字間 ---- */
  --ls-head:  .04em;  /* 見出し標準 */
  --ls-sub:   .08em;  /* サブ見出し */
  --ls-label: .2em;   /* 英字ラベル(READ/THINK等) */
  --ls-wide:  .42em;  /* 装飾英字の最大字間 */

  /* ---- セクション余白（縦リズム）---- */
  --sp-section:      clamp(80px, 12vh, 140px);   /* 標準セクション上下 */
  --sp-section-hero: clamp(120px, 16vh, 180px);  /* ヒーロー上部 */
  --sp-section-cta:  clamp(88px, 13vh, 150px);   /* CTA帯 */
  --sp-section-band: clamp(64px, 9vh, 96px);     /* 信頼帯（薄め）*/
  --sp-inline:       clamp(24px, 6vw, 72px);     /* 左右共通 */

  /* ---- 角丸・罫 ---- */
  --radius-card: 8px;
  --radius-btn:  6px;
  --rule-gold: 1px solid rgba(197, 160, 89, .5); /* 金の細罫（信頼帯の上下等）*/
}

/* ============================================================
   使用ルール（Claude Code実装時の遵守事項）
   1. 色はすべて var(--alpe-*) 参照。hex直書き禁止
   2. 赤の面（--alpe-red-stage/night）を使えるのは
      ヒーロー・信頼帯・CTA帯・フッターのみ。本文セクションの背景は
      --alpe-paper と --alpe-paper-dim の交互
   3. --alpe-gold は罫線・番号・小アクセント限定。ボタンや面には使わない
   4. 見出し=--font-mincho、本文=--font-gothic。例外を作らない
   5. 主CTAボタンは1ページ1つ。背景 --alpe-red-stage、文字 --alpe-paper
   6. セクションの縦paddingは --sp-section 系のみ。任意値の追加禁止
   ============================================================ */