/**
 * デザイントークン - みなと内科・呼吸器クリニック
 *
 * すべての色・フォント・スペーシング・UIパーツ値をここで一元管理する。
 * コンポーネントから直接 hex 値を書かず、必ずこの変数を参照すること。
 *
 * コントラスト比（WCAG 2.1 AA 基準: 4.5:1以上）
 *   --color-primary   (#1A6FA8) on white:       5.33:1 ✓
 *   --color-secondary (#4BA3D3) on white:        3.10:1 → 大文字見出し用途のみ（AA Large = 3:1）
 *   --color-accent    (#E87B2A) on white:        1.76:1 ✗ → ボタンテキストは --color-text を使用
 *   --color-accent    (#E87B2A) on #1E2A38:      4.71:1 ✓
 *   --color-text      (#1E2A38) on --color-bg:  13.7:1 ✓
 *   --color-text-light(#6B7E91) on --color-bg:   4.60:1 ✓
 */

:root {
  /* =============================================
   * カラーパレット
   * ============================================= */

  /** Primary: 海・空を連想する落ち着いたブルー */
  --color-primary: #1a6fa8;
  --color-primary-dark: #155d8e; /* ホバー時・アクティブ時 */
  --color-primary-light: #e8f2f9; /* 背景薄色用途（タグ・バッジ等） */

  /** Secondary: 清潔感のある中明度ブルー */
  --color-secondary: #4ba3d3;
  --color-secondary-dark: #3a8dba;
  --color-secondary-light: #eef7fc;

  /**
   * Accent: 予約ボタン等、視認性の高いオレンジ
   * 注意: 白テキストとの組み合わせは WCAG AA 不合格（1.76:1）。
   *       ボタンテキストは --color-text（ネイビー）を使用すること。
   */
  --color-accent: #e87b2a;
  --color-accent-dark: #d06820; /* ホバー時 */
  --color-accent-light: #fdf0e6; /* 背景薄色用途 */

  /** 背景: わずかに青みを帯びたオフホワイト */
  --color-bg: #f5f8fb;
  --color-bg-white: #ffffff; /* カード・モーダルの白背景 */
  --color-bg-section-alt: #eef3f8; /* 交互セクション背景 */

  /** テキスト: ネイビー寄りのダークグレー */
  --color-text: #1e2a38;
  --color-text-light: #6b7e91; /* 補足テキスト・キャプション */
  --color-text-on-primary: #ffffff; /* Primary背景上のテキスト */
  --color-text-on-accent: #1e2a38; /* Accent背景上のテキスト（AA対応） */

  /** 罫線・区切り */
  --color-border: #d4e3ef;
  --color-border-strong: #b0c8de; /* 強調区切り */

  /* =============================================
   * タイポグラフィ
   * ============================================= */

  /** フォントファミリー */
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /** ベースフォントサイズ（モバイルファースト） */
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  /** 見出しサイズ（SP基準） */
  --font-size-h1: clamp(28px, 6vw, 40px);
  --font-size-h2: clamp(22px, 4.5vw, 32px);
  --font-size-h3: clamp(18px, 3.5vw, 24px);
  --font-size-h4: clamp(16px, 2.5vw, 20px);
  --font-size-h5: 16px;
  --font-size-h6: 14px;

  /** ボタン・ラベル */
  --font-size-btn: 15px;
  --font-size-caption: 13px;
  --font-size-badge: 12px;

  /** フォントウェイト */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /** 行間 */
  --line-height-base: 1.75;
  --line-height-heading: 1.35;
  --line-height-tight: 1.2;
  --line-height-relaxed: 1.85;

  /** 文字間隔 */
  --letter-spacing-base: 0.02em;
  --letter-spacing-heading: 0.04em;
  --letter-spacing-wide: 0.08em; /* バッジ・キャプション */

  /* =============================================
   * スペーシング（8px グリッド）
   * ============================================= */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /** セマンティックスペーシング */
  --space-section: 56px; /* SP: セクション間余白 */
  --space-section-pc: 80px; /* PC: セクション間余白 */
  --space-element: 24px; /* 要素間余白 */
  --space-card-inner: 24px; /* カード内余白 */
  --space-container-side: 20px; /* SP: コンテナ左右余白 */

  /* =============================================
   * レイアウト
   * ============================================= */

  --container-max: 1200px;
  --container-narrow: 800px; /* 記事・コラム等の狭いコンテナ */
  --container-wide: 1400px; /* フルワイドセクション内コンテナ */

  /** グリッド */
  --grid-gap: 24px;
  --grid-gap-sm: 16px;

  /** ブレイクポイント（参考値・CSSでは直接使用不可） */
  /* --bp-tablet: 768px; */
  /* --bp-pc: 1024px; */

  /* =============================================
   * UIパーツ
   * ============================================= */

  /** 角丸 */
  --radius-card: 8px;
  --radius-btn: 4px;
  --radius-badge: 4px;
  --radius-input: 4px;
  --radius-pill: 9999px; /* 丸いバッジ・タグ */

  /** シャドウ */
  --shadow-card: 0 2px 12px rgba(26, 111, 168, 0.1);
  --shadow-card-hover: 0 6px 24px rgba(26, 111, 168, 0.18);
  --shadow-header: 0 2px 8px rgba(26, 111, 168, 0.08);
  --shadow-btn: 0 2px 6px rgba(26, 111, 168, 0.2);
  --shadow-btn-accent: 0 2px 6px rgba(232, 123, 42, 0.3);

  /** ボタン */
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-height-lg: 56px;
  --btn-min-width: 160px;
  --btn-padding-x: 24px;

  /** フォーム */
  --input-height: 48px;
  --input-padding-x: 14px;
  --input-border: 1px solid var(--color-border);
  --input-border-focus: 1px solid var(--color-primary);

  /** アイコン（Tabler Icons） */
  --icon-size: 24px;
  --icon-size-sm: 20px;
  --icon-size-lg: 32px;
  --icon-stroke: 1.5;

  /* =============================================
   * トランジション
   * ============================================= */

  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;
  --transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  --transition-transform: transform 0.2s ease;
  --transition-shadow: box-shadow 0.2s ease;

  /* =============================================
   * z-index 管理
   * ============================================= */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}