/* ==========================================================================
   tokens.css — デザイントークン（正本 = raw/designer/2026-08-13 design_recipe）
   9ページすべてがこの変数を参照する。ここに無い色・サイズは使わない。
   🔴 禁止色（赤系・オレンジ・蛍光黄・紫・金のグラデーション）は
      「変数として定義しない」＝存在しないので誰も使えない。
   ========================================================================== */

:root {
  /* ---- 色 ------------------------------------------------------------- */
  --c-bg:            #FFFFFF; /* 基本の地 */
  --c-bg-alt:        #EFF3F7; /* 交互面・表のヘッダ行（白との差3.4%では面が分かれないため濃く） */
  --c-bg-warm:       #FAF7F2; /* 金側の極薄地。S3・S10の2箇所だけ */
  --c-navy:          #14315B; /* 主色。見出し・ヘッダー・主CTA面・帯 */
  --c-navy-deep:     #0B1F3D; /* 最暗。最終CTA・フッター */
  --c-navy-light:    #4A749E; /* 図解の線・アイコン・小見出し補助 */
  --c-water:         #DCE8F0; /* 図解の背景面・ビフォー/アフターのラベル地 */
  --c-gold:          #A98351; /* 円形ボタン・2px下線・outlineリング用のベタ */
  /* 🔴 設計書の #8F6C3D は「白地で4.79:1」だが、同じ設計書が指定する
     warm(#FAF7F2)=4.49:1 / tint(#F6F1E9)=4.26:1 / alt(#EFF3F7)=4.30:1 では
     AA(4.5:1)を割る（実測）。実際に載る4つの地すべてで通る値へ1段暗くした。 */
  --c-gold-text:     #866333; /* 白5.46 / warm5.11 / tint4.86 / alt4.90 : 1 */
  --c-gold-on-dark:  #C9A96E; /* 🔴 紺地の金（#A98351 on #14315B は3.73:1で不足） */
  --c-gold-tint:     #F6F1E9; /* タグ・バッジの地。唯一許可する金の面 */
  --c-gold-line:     #E8DCC6; /* 金tintパーツの枠 */
  --c-line:          #E2E0DC; /* カード枠 */
  --c-rule:          #DDE3E9; /* 表の罫線 */
  --c-text:          #333A42;
  --c-text-head:     #14315B;
  --c-text-sub:      #5B6570;
  --c-text-invert:   #FFFFFF;
  --c-text-invert-sub:#C9D6E4;
  --c-line-green:    #06C755; /* LINE公式指定色。面積は主CTA未満 */

  /* 写真上のオーバーレイ（画像に焼き込まずCSSで実装する） */
  --c-photo-overlay: rgba(11, 31, 61, .52);

  /* ---- 書体 ----------------------------------------------------------- */
  --ff-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
             "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --ff-num:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;

  /* ---- 級数（PC）------------------------------------------------------ */
  --fs-display:   64px;
  /* 上限72pxだとS6「戸建てのお客様／…管理会社様」28文字が1072pxの器で3行に折れる（実測）。
     28文字×64px=1792 → 1072pxで2行に収まる64pxを上限にする。 */
  --fs-h2:        clamp(40px, 5vw, 64px);
  --fs-h3:        21px;
  --fs-lead:      19px;
  --fs-body:      17px;
  --fs-note:      14px;
  --fs-stat:      88px; /* 実績数字。画面内で最大の要素 */
  --fs-label:     12px; /* 英字セクションラベル */
  --fs-sectnum:  128px; /* 背景の巨大番号 */
  --fs-stat-unit: 24px;

  /* ---- 行送り・字間 --------------------------------------------------- */
  --lh-display: 1.35;
  --lh-heading: 1.5;
  --lh-body:    1.9;
  --tr-display: .04em;
  --tr-body:    .02em;
  --tr-label:   .28em;

  /* ---- 余白・寸法 ----------------------------------------------------- */
  --container:  1120px; /* 料金表・エリア一覧を抱えるため1440にしない */
  --section-y:    112px;
  --section-y-lg: 144px; /* S3理念・S13 CTAのみ＝非対称の余白 */
  --card-pad:     32px;
  --gutter-xl:  64px;
  --gutter-l:   48px;
  --gutter-m:   32px;
  --gutter-s:   24px;
  --edge:       24px;   /* 画面端の最小余白 */

  /* ---- カード（design_rules の標準）----------------------------------- */
  --card-border: 1px solid var(--c-line);
  --card-shadow: 0 14px 36px rgba(20, 49, 91, .09); /* 🔴 alpha .10 を超えない */
  --radius:      2px;   /* 表・入力欄・バーガー専用に格下げ */
  --r-dia:      24px;   /* 対角ラジアス＝面の標準 */
  --r-dia-sm:   16px;   /* 小カード・Qバッジ */
  --r-pill:   9999px;   /* ボタン・タグ */

  /* ---- その他 --------------------------------------------------------- */
  --header-h:   84px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* タブレット。1024px未満で級数を一段落とす。
   🔴 これが無いと 768px で display 64px・stat 72px のままになり、
      実績数字帯が横に溢れて横スクロールが発生する（実測で確認）。 */
@media (max-width: 1023px) {
  :root {
    --fs-display:   44px;
    --fs-h2:        34px;  /* 🔴 clamp の下限より小さい固定値。タブレットはここで打ち止め */
    --fs-lead:      18px;
    --fs-stat:      64px;
    --fs-stat-unit: 20px;

    --section-y:    88px;
    --section-y-lg: 104px;
    --gutter-xl:    44px;
    --gutter-l:     32px;
  }
}

/* SP はここで「変数だけ」差し替える。各要素で font-size を個別上書きしない */
@media (max-width: 767px) {
  :root {
    /* 🔴 34px だと「詰まってから直すより、」が390px幅に収まらず「り、」が孤立する（実測） */
    --fs-display:   30px;
    --fs-h2:        28px;
    --fs-h3:        18px;
    --fs-lead:      17px;
    --fs-body:      16px;
    --fs-note:      13px;
    --fs-stat:      48px;
    --fs-stat-unit: 16px;

    --section-y:    64px;
    --section-y-lg: 80px;
    --card-pad:  22px;
    --gutter-xl: 32px;
    --gutter-l:  24px;
    --r-dia:     16px;
    --gutter-m:  20px;
    --gutter-s:  16px;
    --edge:      18px;

    --header-h:  64px;
  }
}