/**
 * Base CSS
 * ベーススタイル - リセット、CSS変数、基本設定
 * 高橋運輸興業 Webサイトリニューアル
 *
 * このファイルは全ページで必須のベーススタイルを定義します。
 * 変更する際は全ページに影響することに注意してください。
 */

/* ===================================
   CSS変数定義 - デザイントークン
   これらの変数を変更すると全体の色やスペーシングが変わります
   =================================== */

:root {
  /* ==================
     カラーパレット
     パターン1: 青メイン・明るいプロフェッショナル
     ロゴカラー（赤:#f02038, グレー:#9b928b, 青:#4150cd）を基調
     ================== */
  /* メインカラー（企業カラー - ロゴの青） */
  --primary-blue: #4150cd;       /* ロゴの青 - ボタン、アクセント要素 */
  --secondary-blue: #6b7add;     /* 明るい青 - リンク、セカンダリ要素 */
  --light-blue: #e8ebf9;         /* 薄い青 - 背景、ハイライト */

  /* アクセントカラー（ロゴの赤） */
  --accent-red: #f02038;         /* ロゴの赤 - CTAボタン、重要な強調 */

  /* グレーカラー（ロゴのグレー） */
  --gray: #9b928b;               /* ロゴのグレー - 補助的な要素 */
  --light-gray: #f5f4f3;         /* 薄いグレー - セカンダリ背景 */

  /* テキストカラー */
  --text-primary: #1a202c;       /* 濃いグレー - 本文テキスト（高コントラスト） */
  --text-secondary: #4a5568;     /* 中間グレー - 補助テキスト */
  --text-light: #6b7280;         /* 薄いグレー - キャプション */
  --text-white: #ffffff;         /* 白色テキスト */

  /* 見出し専用カラー（濃い青系） */
  --heading-primary: #1e2a78;    /* 濃紺 - 主要見出し用（高コントラスト） */
  --heading-secondary: #2f3a9e;  /* 濃い青 - セカンダリ見出し用 */

  /* 背景カラー */
  --bg-white: #ffffff;           /* 白背景 */
  --bg-light: #f8faff;           /* 薄い青の背景 */
  --bg-section: #fafbfc;         /* セクション背景 */
  --bg-gray: #f5f4f3;            /* グレー背景 */

  /* ボーダーカラー */
  --border-light: #e5e7eb;       /* 薄いボーダー */
  --border-primary: #4150cd;     /* プライマリボーダー（青） */

  /* ==================
     スペーシングシステム
     数値ではなく意味のある名前を使用
     ================== */
  /* 基本スケール */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* セマンティックスペーシング（推奨使用） */
  --space-xs: var(--space-2);   /* 0.5rem = 8px */
  --space-sm: var(--space-4);   /* 1rem = 16px */
  --space-md: var(--space-6);   /* 1.5rem = 24px */
  --space-lg: var(--space-8);   /* 2rem = 32px */
  --space-xl: var(--space-10);  /* 2.5rem = 40px */
  --space-2xl: var(--space-16); /* 4rem = 64px */

  /* ==================
     タイポグラフィ
     ================== */
  --font-family-base: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;

  /* フォントサイズ */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.5rem;   /* 40px */

  /* 行高 */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* ==================
     レイアウト
     ================== */
  --max-width-content: 1200px;  /* コンテンツ最大幅 */
  --max-width-narrow: 800px;    /* 狭いコンテンツ幅 */

  /* ==================
     その他
     ================== */
  --border-radius-sm: 2px;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 10px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 2px 10px rgba(0, 0, 0, 0.1);

  --border-color: var(--border-light);

  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===================================
   リセット・ノーマライズ
   すべての要素の基本設定
   =================================== */

/* ユニバーサルリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML5 要素のディスプレイ設定 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 基本要素の設定 */
html {
  font-size: 16px; /* rem計算の基準 */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-primary);
  background-color: var(--bg-white);
}

/* リンクのデフォルトスタイル */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

/* フォーカスインジケーター設定 */
/* マウスクリック時は非表示、キーボード操作時は表示（アクセシビリティ確保） */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* リストのリセット */
ul, ol {
  list-style: none;
}

/* 画像の基本設定 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

/* テーブルの基本設定 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* フォーム要素の基本設定 */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

button {
  cursor: pointer;
}

/* フォーカススタイルの統一 */
:focus {
  outline: 2px solid var(--secondary-blue);
  outline-offset: 2px;
}

/* ===================================
   アクセシビリティ
   =================================== */

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キーボードフォーカス時のみ表示 */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}