:root {
  /* ─── カラー：プライマリ（緑）─────────────────── */
  --color-primary:        #1A6B3C;
  --color-primary-light:  #2E8B57;
  --color-primary-dark:   #145530;
  --color-primary-pale:   #E8F5EE;

  /* ─── カラー：セカンダリ（オレンジ）────────────── */
  --color-secondary:      #F5A623;
  --color-secondary-light:#FFBE55;
  --color-secondary-dark: #C8841A;
  --color-secondary-pale: #FEF5E4;

  /* ─── カラー：CTA（赤）──────────────────────── */
  --color-cta:            #E84033;
  --color-cta-hover:      #C62828;
  --color-cta-sub:        #FF6B35;
  --color-cta-sub-hover:  #E55B25;

  /* ─── テキスト ────────────────────────────── */
  --color-text-primary:   #333333;
  --color-text-secondary: #666666;
  --color-text-muted:     #999999;
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      #1A6B3C;
  --color-text-link-hover:#145530;

  /* ─── 背景 ────────────────────────────────── */
  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F7F8FA;
  --color-bg-section:     #EEF2F5;
  --color-bg-dark:        #1A1A2E;
  --color-bg-header:      #FFFFFF;
  /* セクションを白→薄グレー→白→ごく薄い緑で切り替えるための面。
     ブランドgreenを大面積に使わないよう、--color-primary-pale より更に淡くする */
  --color-bg-mint:        #F4FAF6;

  /* ─── ボーダー ────────────────────────────── */
  --color-border:         #E0E0E0;
  --color-border-light:   #F0F0F0;
  --color-border-focus:   #1A6B3C;

  /* ─── ステータス ──────────────────────────── */
  --color-danger:         #D32F2F;
  --color-warning:        #F5A623;
  --color-success:        #2E8B57;
  --color-info:           #1565C0;

  /* ─── フォント ────────────────────────────── */
  --font-sans-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-sans-en: 'Inter', Arial, Helvetica, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* ─── フォントサイズ（スマホ基準）────────────── */
  /* 一括スケールではなく階層として持つ。12px未満は作らない */
  --fs-h1:      28px;
  --fs-h2:      23px;
  --fs-h3:      18px;
  --fs-body:    16px;
  --fs-meta:    14px;  /* 補助情報・日付・エリア等 */
  --fs-caption: 13px;  /* 注釈・タグ。これが最小 */
  --fs-cta:     16px;
  --fs-price:   28px;
  --fs-company: 18px;  /* 業者名（カード内で最も強い要素） */

  /* ─── 行間（日本語の可読性）──────────────── */
  --lh-body:    1.8;
  --lh-heading: 1.4;

  /* ─── スペーシング ────────────────────────── */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   40px;
  --spacing-2xl:  48px;
  --spacing-xxl:  64px;
  --spacing-3xl:  80px;
  --spacing-side: 16px;
  /* セクション間の縦余白。セクションの境界を作る主役なので独立トークンにする */
  --section-pad-y: 64px;

  /* ─── レイアウト ──────────────────────────── */
  --width-content: 1080px;
  --width-narrow:  720px;
  --width-cards:   1000px;
  --header-h:      62px;
  --cta-bar-h:     64px;
  --drawer-w:      min(86vw, 320px);
  /* 業者カードのサムネイル枠。375px でも社名欄が 170px 以上残る大きさにしてある
     （カード内幅343 − ランクバッジ36 − gap8×2 − 枠116 = 175px）。
     枠だけ広げても中身は大きくならないので、テンプレート側は 'medium'（長辺300）を要求する */
  --company-logo-sp: 116px;
  --company-logo-pc: 152px;

  /* ─── タップ領域 ──────────────────────────── */
  --tap-min: 44px;

  /* ─── ボーダーラジウス ────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ─── シャドウ ────────────────────────────── */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.14);
  --shadow-cta: 0 4px 12px rgba(232,64,51,0.35);
  --shadow-cta-sm: 0 2px 6px rgba(232,64,51,0.22);
  --shadow-cta-lg: 0 8px 24px rgba(232,64,51,0.42);

  /* ─── グラデーション ──────────────────────── */
  --gradient-cta: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-hover) 100%);

  /* ─── トランジション ──────────────────────── */
  --transition-base: 0.2s ease;
  --transition-drawer: 0.25s ease;

  /* ─── フォーカスリング ────────────────────── */
  --focus-ring:       0 0 0 3px rgba(26,107,60,0.45);
  --focus-ring-light: 0 0 0 3px rgba(255,255,255,0.7);
}

@media (min-width: 768px) {
  :root {
    --fs-h1:      34px;
    --fs-h2:      30px;
    --fs-h3:      22px;
    --fs-body:    17px;
    --fs-meta:    15px;
    --fs-caption: 14px;
    --fs-cta:     18px;
    --fs-price:   36px;
    --fs-company: 20px;
    --spacing-side: 24px;
    --section-pad-y: 96px;
    --header-h:     72px;
  }
}