:root {
  /* === Colors === */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-tertiary: #EEEEEE;
  --color-bg-dark: #F0F0F0;
  --color-bg-card: #FFFFFF;
  --color-honda-red: #CC0000;
  --color-honda-red-hover: #E60000;
  --color-white: #FFFFFF;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #444444;
  --color-text-muted: #777777;
  --color-text-dim: #999999;
  --color-border: #E0E0E0;
  --color-border-light: #CCCCCC;
  --color-overlay-dark: rgba(0, 0, 0, 0.85);
  --color-overlay-medium: rgba(0, 0, 0, 0.7);
  --color-error: #DD2222;
  --color-success: #22AA22;

  /* === Fonts (Honda Design Guideline 2-2) === */
  --font-primary: 'HondaGlobalFontJP', 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
  --font-heading-en: 'HondaGlobalFontJP', 'Helvetica Neue', Arial, sans-serif;

  /* === Typography Scale (Honda Design Guideline 2-2) === */
  --font-size-hero: clamp(32px, 5vw, 46px);
  --font-size-h1: clamp(24px, 4vw, 46px);       /* text-xxxl: PC h1 46px */
  --font-size-h2: clamp(24px, 3vw, 32px);        /* text-xxl: PC h2 32px */
  --font-size-h3: 24px;                           /* text-xl: PC h3 / SP h1 24px */
  --font-size-h4: 20px;                           /* text-l: PC h4 / SP h2 20px */
  --font-size-body: 16px;                         /* text-base: 本文 16px */
  --font-size-small: 14px;                        /* text-m: メニュー・タグ 14px */
  --font-size-caption: 12px;                      /* text-s: 注釈 12px */
  --font-size-spec: clamp(32px, 4vw, 48px);

  /* === Font Weights (Honda Guideline: W3=300/Regular, W6=600/Bold) === */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;

  /* === Line Heights (Honda Design Guideline 2-2) === */
  --line-height-heading: 1.2;
  --line-height-sub: 1.4;
  --line-height-body: 1.7;

  /* === Letter Spacing (Honda Design Guideline 2-2) === */
  --letter-spacing-heading: 0.05em;
  --letter-spacing-body: 0;

  /* === Layout (Honda Design Guideline 2-5) === */
  --section-padding: 96px 0;           /* 8の倍数: 96px */
  --section-padding-mobile: 56px 0;    /* 8の倍数: 56px */
  --container-width: 1080px;           /* ガイドライン: 最大コンテンツ幅1080px */
  --container-padding: 0 40px;
  --container-padding-mobile: 0 20px;

  /* === UI === */
  --card-border-radius: 8px;
  --button-border-radius: 4px;
  --transition-default: all 0.3s ease;
  --transition-slow: all 0.6s ease;

  /* === Header === */
  --header-height: 80px;

  /* === Z-index === */
  --z-header: 1000;
  --z-modal: 2000;
  --z-overlay: 1500;
}