@charset "UTF-8";
/* ==========================================================================
   variables.css — デザイントークン（全ワーカーの契約）
   合資会社 田野モータース 様 デザイン提案用デモサイト

   ⚠️ このファイル以外の場所でCSSカスタムプロパティを新規定義しないこと。
   ⚠️ 色の組み合わせは 設計書 §4.2「背景ごとの使用可能な前景色 対応表」を
      唯一の根拠とすること。表にない組み合わせを作らない。
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Color — Surface
     -------------------------------------------------------------------- */
  --navy-950: #0A1B2C;   /* フッター                白文字 17.41:1 */
  --navy-900: #0F2740;   /* ヒーローOL／S1帯／S9    白文字 15.17:1 */
  --navy-700: #1B3A5C;   /* S3                      白文字 11.80:1 */
  --surface:  #F5F3EF;   /* 本文背景（既定）        --ink 15.70:1 */
  --surface-2:#FFFFFF;   /* カード面／S5・S7        --ink 17.40:1 */

  /* --------------------------------------------------------------------
     Color — Accent
     ⚠️ --accent-on-dark を明色面・写真面のテキストに使うことを禁止する。
        --surface 上 2.76:1 ／ ヒーロー写真＋α.72 上 2.03:1
     -------------------------------------------------------------------- */
  /* ⚠️ 2026-08-18 是正：旧値 #B85417 は --surface(#F5F3EF) 上で 4.39:1 しかなく
        AA不適合だった（4.86:1 は白背景での値であり、本文背景の値ではない）。
        c-btn--secondary のように accent を「文字色」として明色面に置く用途があるため、
        両方の面で 4.5:1 を満たす #B25214 に変更した。 */
  --accent:         #B25214;  /* --surface 4.61:1 / --surface-2 5.11:1 / 白文字 on 塗り 5.11:1 */
  --accent-hover:   #9C4512;
  --accent-on-dark: #E8722A;  /* 暗色面専用  navy-900 4.97:1 / navy-700 3.86:1(大字・非テキストのみ) */

  /* --------------------------------------------------------------------
     Color — Text
     -------------------------------------------------------------------- */
  --ink:               #1A1A1A;  /* surface 15.70:1 / surface-2 17.40:1 */
  --ink-muted:         #6B6B6B;  /* surface  4.81:1 / surface-2  5.33:1 */
  --ink-on-dark:       #FFFFFF;
  --ink-muted-on-dark: #C3CBD4;  /* navy-700 7.20:1 / navy-900 9.26:1 */

  /* --------------------------------------------------------------------
     Color — Line / State
     -------------------------------------------------------------------- */
  --border:        #D6D1C8;  /* 純装飾の罫線 */
  --border-strong: #857F75;  /* 意味を持つ境界  surface 3.65:1 */
  --border-on-dark:       rgba(255, 255, 255, .18);
  --surface-on-dark:      rgba(255, 255, 255, .06);
  --surface-on-dark-hover:rgba(255, 255, 255, .10);
  --error:         #B3261E;  /* 明色面のエラー  surface 5.90:1 */
  /* ⚠️ 暗色面（S9 お問い合わせは --navy-900）では --error が 2.32:1 しかなく判読不能。
        暗色面のエラー文字にはこちらを使うこと。 */
  --error-on-dark: #FFB4AB;  /* navy-900 8.93:1 */

  /* フォーカスリング。暗色面では .is-dark が上書きする */
  --focus: var(--accent);

  /* --------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------- */
  --font-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
                  "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                  "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;

  --fs-hero:  clamp(2rem, 7vw, 3.5rem);          /* 32 → 56 */
  --fs-h2:    clamp(1.5rem, 4vw, 2.25rem);       /* 24 → 36 */
  --fs-h3:    clamp(1.125rem, 2.5vw, 1.375rem);  /* 18 → 22 */
  --fs-lead:  clamp(1.0625rem, 2vw, 1.25rem);    /* 17 → 20 */
  --fs-body:  clamp(1.0625rem, 1.5vw, 1.125rem); /* 17 → 18  ※下限17pxを守る */
  --fs-small: 0.9375rem;                         /* 15 */
  --fs-tel:   clamp(1.5rem, 4vw, 2rem);          /* 24 → 32  ※下限24pxを守る */

  --lh-body:    1.8;
  --lh-heading: 1.4;
  --lh-tight:   1.35;

  /* --------------------------------------------------------------------
     Spacing（8px base）
     -------------------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-10: 4rem;   --sp-12: 5rem;   --sp-16: 8rem;

  --section-py:       clamp(3rem, 8vw, 6rem);
  --container:        1120px;
  --container-narrow: 820px;
  --gutter:           clamp(1rem, 4vw, 2rem);

  /* --------------------------------------------------------------------
     Radius / Shadow
     -------------------------------------------------------------------- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 16px;  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(15, 39, 64, .06), 0 2px 8px rgba(15, 39, 64, .06);
  --sh-2: 0 4px 12px rgba(15, 39, 64, .10), 0 12px 32px rgba(15, 39, 64, .10);

  /* --------------------------------------------------------------------
     Layout metrics
     ⚠️ --h-header / --anchor-offset は js/nav.js が実測値で上書きする。
        ここの値はJS不発時のフォールバックである。
     -------------------------------------------------------------------- */
  --h-header:          64px;
  --h-header-scrolled: 52px;
  --h-bottombar:       64px;
  --anchor-offset:     72px;

  /* --------------------------------------------------------------------
     z-index
     -------------------------------------------------------------------- */
  --z-demoband:  10;
  --z-totop:     80;   /* ページ先頭へ戻るボタン。下部固定バーより下に置く */
  --z-bottombar: 90;
  --z-header:    100;
  --z-drawer:    110;
  --z-modal:     1000;
  --z-toast:     1100;

  /* --------------------------------------------------------------------
     Motion
     -------------------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-hero-zoom: 8000ms;
  --ease: cubic-bezier(.16, .84, .44, 1);

  /* --------------------------------------------------------------------
     Hero overlay
     ⚠️ 設計書 §4.3。最小有効α = .72（絶対下限 .65）。
        αを下げる方向の重ねを禁止する。加算方向のみ許可。
        α=.72 のとき最悪ケース（純白の写真領域）で白文字 6.19:1。
     -------------------------------------------------------------------- */
  --hero-overlay-alpha: .72;
  --hero-overlay: rgba(15, 39, 64, .72);
}

/* ==========================================================================
   暗色セクション
   背景が --navy-700 / --navy-900 / --navy-950 / ヒーロー写真 の面に付与する。
   ========================================================================== */
.is-dark {
  --focus: var(--accent-on-dark);
}