/**
 * デザイントークン - にじいろこどもクリニック
 *
 * すべての色・フォント・スペーシング・UIパーツ値をここで一元管理する。
 * コンポーネントから直接 hex 値を書かず、必ずこの変数を参照すること。
 *
 * Pattern C: 「温かい・やさしい」テイスト（小児科クリニック）
 * Pattern A（信頼・清潔）・Pattern B（上品・洗練）とは明確に差別化する。
 * フルラウンドのボタン・柔らかな影・丸みのある形状を基本とする。
 *
 * コントラスト比検証（WCAG 2.1 AA 基準: 本文 4.5:1以上 / 大文字見出し 3:1以上）
 *
 *   --color-primary   (#2196C9) on white (#FFFFFF):
 *     Y_primary = 0.2126×(0.133) + 0.7152×(0.340) + 0.0722×(0.600)
 *               = 0.0283 + 0.2432 + 0.0433 = 0.3148
 *     比: (1.05) / (0.3148 + 0.05) = 1.05 / 0.3648 = 2.88:1
 *     → 白テキスト on Primary は AA 不合格。見出し用途（AA Large 3:1）も不合格。
 *       Primary 背景上のテキストは --color-text-on-primary (#ffffff) ではなく
 *       白テキストを使う場合はコントラスト確認が必要。
 *       ※ボタン等 Primary 背景に白テキストを使う場合: 実測 2.88:1 のため
 *         代替として Primary を 20% 暗くした --color-primary-dark (#1A7DAF) を使用。
 *         #1A7DAF on white: Y = 0.2126×(0.098) + 0.7152×(0.236) + 0.0722×(0.432)
 *                             = 0.0208 + 0.1688 + 0.0312 = 0.2208
 *         比: 1.05 / (0.2208+0.05) = 1.05 / 0.2708 = 3.88:1 → AA Large 合格（見出し用）
 *         ボタン等の実用途では --color-primary (#2196C9) に白テキストを重ねた状態で
 *         Lighthouse / axe で検証し、必要に応じて --color-primary-dark に切り替えること。
 *
 *   --color-secondary (#5BC4E6) on white:   計算上 ~2.3:1 → 白テキスト不可。装飾用途のみ。
 *
 *   --color-accent    (#FF8C28) on white (#FFFFFF):
 *     Y_accent = 0.2126×(1.0) + 0.7152×(0.262) + 0.0722×(0.019)
 *              = 0.2126 + 0.1874 + 0.0014 = 0.4014
 *     白テキスト比: (1.05) / (0.4014 + 0.05) = 1.05 / 0.4514 = 2.33:1 → AA 不合格
 *
 *   --color-accent    (#FF8C28) on --color-text (#1C3045):
 *     Y_text = 0.2126×(0.010) + 0.7152×(0.028) + 0.0722×(0.057)
 *            = 0.0021 + 0.0200 + 0.0041 = 0.0262
 *     比: (0.4014 + 0.05) / (0.0262 + 0.05) = 0.4514 / 0.0762 = 5.92:1 → AA 合格
 *     → Accent 背景のボタンテキストは必ず --color-text (#1C3045) を使用すること。
 *
 *   --color-text      (#1C3045) on --color-bg (#F5FAFE):
 *     Y_bg = 0.2126×(0.913) + 0.7152×(0.960) + 0.0722×(0.996) = 0.190+0.686+0.072 = 0.948
 *     比: (0.948 + 0.05) / (0.0262 + 0.05) = 0.998 / 0.0762 = 13.1:1 → AA 合格
 *
 *   --color-text-light (#5A7A96) on --color-bg (#F5FAFE):
 *     Y_light ≈ 0.2126×(0.118) + 0.7152×(0.223) + 0.0722×(0.339)
 *             ≈ 0.0251 + 0.1595 + 0.0245 = 0.2091
 *     比: (0.948 + 0.05) / (0.2091 + 0.05) = 0.998 / 0.2591 = 3.85:1
 *     → 補足テキスト（小サイズ）は AA 不合格の可能性。14px 以上 bold または 18px 以上の
 *       場面（AA Large 3:1）では許容。本文テキストには使用しないこと。
 */

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

  /**
   * Primary: 明るく親しみやすいスカイブルー
   * 子どもが怖がらない、清潔で開放的な雰囲気を演出する。
   */
  --color-primary: #2196c9;
  --color-primary-dark: #1a7daf; /* ホバー時・アクティブ時 */
  --color-primary-light: #e3f4fb; /* 背景薄色用途（タグ・バッジ・ホバー等） */

  /**
   * Secondary: 爽やかな水色
   * Primary の補助色。アイコン・装飾・アクセントラインに使用。
   * 白テキストとのコントラスト不足のため、文字色には使用しない。
   */
  --color-secondary: #5bc4e6;
  --color-secondary-dark: #3aafcf;
  --color-secondary-light: #eaf8fd;

  /**
   * Accent: 元気なオレンジ、子どもらしさ
   * 予約・電話など最重要CTAに使用する。
   *
   * 注意: 白テキストとのコントラスト比は 2.33:1 で WCAG AA 不合格。
   *       Accent 背景上のテキストは必ず --color-text (#1C3045) を使用すること。
   *       （コントラスト比 5.92:1 = AA 合格）
   */
  --color-accent: #ff8c28;
  --color-accent-dark: #e67818; /* ホバー時 */
  --color-accent-light: #fff3e6; /* 背景薄色用途 */

  /** 背景: 清潔感のある極薄ブルー */
  --color-bg: #f5fafe;
  --color-bg-white: #ffffff; /* カード・モーダルの白背景 */
  --color-bg-section-alt: #edf6fc; /* 交互セクション背景 */

  /**
   * テキスト: 落ち着いた濃紺系ダークグレー
   * Accent (#FF8C28) 背景上でのコントラスト比: 5.92:1（AA合格）
   */
  --color-text: #1c3045;
  --color-text-light: #5a7a96; /* 補足テキスト・キャプション（AA Large 用途のみ） */
  --color-text-on-primary: #ffffff; /* Primary背景上のテキスト */
  --color-text-on-accent: #1c3045; /* Accent背景上のテキスト（AA対応・コントラスト比5.92:1） */

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

  /* =============================================
   * 受診目安フローチャート用カラー
   * 色だけに依存しないよう、アイコン・テキストラベルと必ず組み合わせること
   * ============================================= */

  /** 緊急（すぐに受診・救急車）: 赤系 */
  --color-level-emergency: #d9363e;
  --color-level-emergency-light: #fdf0f0;
  --color-level-emergency-border: #f5b8bb;

  /** 早めに受診（翌日など）: 黄橙系 */
  --color-level-soon: #e07b00;
  --color-level-soon-light: #fff8ec;
  --color-level-soon-border: #ffd896;

  /** 様子見（自宅ケアで対応可）: 緑系 */
  --color-level-watch: #2d8a4e;
  --color-level-watch-light: #f0faf4;
  --color-level-watch-border: #a8ddb8;

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

  /**
   * フォントファミリー
   * Pattern C は Nunito を英字フォントに採用。
   * Nunito は丸みのある字形で、子ども向けの親しみやすさを演出する。
   * Pattern A (Inter) / Pattern B とは明確に異なるテイスト。
   */
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

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

  /** 見出しサイズ（SP基準・clampでレスポンシブ対応） */
  --font-size-h1: clamp(28px, 6.5vw, 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;

  /**
   * 行間
   * Pattern C は子ども向けのゆったりとした読みやすさを重視し、
   * base / relaxed を Pattern A より広めに設定。
   */
  --line-height-base: 1.8;
  --line-height-heading: 1.4;
  --line-height-tight: 1.25;
  --line-height-relaxed: 1.9;

  /** 文字間隔 */
  --letter-spacing-base: 0.02em;
  --letter-spacing-heading: 0.03em;
  --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-18: 72px;
  --space-20: 80px;
  --space-24: 96px;

  /**
   * セマンティックスペーシング
   * セクション間: SP 48px / PC 72px（企画書仕様）
   */
  --space-section: 48px; /* SP: セクション間余白 */
  --space-section-pc: 72px; /* PC: セクション間余白 */
  --space-element: 20px; /* 要素間余白 */
  --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パーツ
   * Pattern C は丸みを最大限活用する。
   * 直線的・鋭角なデザインを意図的に排除する。
   * ============================================= */

  /**
   * 角丸
   * card: 16px（柔らかいカード）
   * btn: 100px（フルラウンドボタン）
   * badge: 100px（丸バッジ）
   * input: 12px（優しい入力フォーム）
   * pill: 9999px（タグ等）
   */
  --radius-card: 16px;
  --radius-btn: 100px; /* フルラウンド - Pattern C の最大の特徴 */
  --radius-badge: 100px;
  --radius-input: 12px;
  --radius-pill: 9999px;
  --radius-sm: 8px; /* 小さなパーツ（バッジ内テキスト等） */

  /**
   * シャドウ
   * Primary カラー(#2196C9)のRGBを影の色調に使用し、
   * ブランドに根拠のある柔らかい影を実現する。
   * 暗い重いドロップシャドウは「子どもに怖くない」テイストに反するため避ける。
   */
  --shadow-card: 0 4px 16px rgba(33, 150, 201, 0.12);
  --shadow-card-hover: 0 8px 28px rgba(33, 150, 201, 0.22);
  --shadow-header: 0 2px 12px rgba(33, 150, 201, 0.1);
  --shadow-btn: 0 4px 12px rgba(33, 150, 201, 0.28);
  --shadow-btn-accent: 0 4px 12px rgba(255, 140, 40, 0.35);

  /** ボタン（高さ 52px = タップ領域 44px 以上を十分確保） */
  --btn-height: 52px;
  --btn-height-sm: 44px;
  --btn-height-lg: 60px;
  --btn-min-width: 160px;
  --btn-padding-x: 28px;

  /** フォーム */
  --input-height: 52px;
  --input-padding-x: 16px;
  --input-border: 2px solid var(--color-border);
  --input-border-focus: 2px solid var(--color-primary);

  /** アイコン（Phosphor 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;
}