/*
 * きくち皮膚科クリニック - デザイントークン
 * Pattern B: 洗練・エレガント（ラベンダーパープル系）
 *
 * コントラスト比検証（WCAG 2.1 AA 基準: 4.5:1以上）
 * --color-accent (#D4A0B5) の相対輝度: 0.445
 *   - 白テキスト (#FFF, L=1.0)  → (1.05 / 0.495) ≒ 2.12:1  ★ AA不合格
 *   - Textカラー (#2D2035, L=0.028) → (0.495 / 0.078) ≒ 6.33:1  ★ AA合格
 * → .btn--accent のテキストカラーは必ず --color-text (#2D2035) を使用すること
 *
 * --color-primary (#7B5EA7) の相対輝度: 0.117
 *   - 白テキスト (#FFF, L=1.0)  → (1.05 / 0.167) ≒ 6.29:1  ★ AA合格
 *
 * --color-text-light (#756588) の相対輝度: ≈ 0.148
 *   - 白背景 (#FAF8FC ≒ L=0.955) → (1.005 / 0.198) ≒ 5.01:1  ★ AA合格
 * → 補足テキスト・キャプション・ラベル等に使用可。
 *   小サイズ（12-14px）テキストにも WCAG AA を満たす
 */

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

  /* ブランドカラー */
  --color-primary: #7b5ea7; /* 上品なラベンダーパープル | L≒0.117 | 白テキストと6.29:1 AA合格 */
  --color-primary-dark: #5e4580; /* ホバー用・より深いパープル */
  --color-primary-light: #9b7ec8; /* 薄いパープル（背景・ボーダー用途） */

  --color-secondary: #a98fcc; /* 明るいライラック */
  --color-secondary-light: #c9b3e3; /* より薄いライラック（背景用） */

  /* アクセント（ダスティローズ）
   * ★ 注意: 白テキストとのコントラスト比 ≒ 2.12:1（AA不合格）
   * このカラーを背景に使う場合は必ず --color-text (#2D2035) を前景色に使用すること */
  --color-accent: #d4a0b5;
  --color-accent-dark: #bc7d98; /* ホバー用 */
  --color-accent-text: #2d2035; /* Accent背景上のテキスト専用（コントラスト比 ≒ 6.33:1 AA合格） */

  /* 背景色 */
  --color-bg: #faf8fc; /* ほんのりラベンダーがかったオフホワイト */
  --color-bg-subtle: #f3eff9; /* セクション交互背景・より紫みの強いオフホワイト */
  --color-bg-inverse: #2d2035; /* ダーク背景（フッター等） */

  /* テキストカラー */
  --color-text: #2d2035; /* 本文メイン（深みのある暗紫色） */
  --color-text-light: #756588; /* 補足・キャプション・ラベル用（白背景対 5.01:1 AA合格） */
  --color-text-on-dark: #faf8fc; /* ダーク背景上のテキスト */
  --color-text-on-primary: #ffffff; /* Primary背景上のテキスト（コントラスト比 ≒ 6.29:1 AA合格） */

  /* 罫線・区切り */
  --color-border: #e2d9ed;
  --color-border-focus: #7b5ea7; /* フォーカスリング */

  /* 状態カラー */
  --color-success: #4a7c59;
  --color-error: #c0392b;
  --color-warning: #b8860b;
  --color-info: #2b6cb0;

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

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

  /* フォントサイズ（8pxグリッドベース） */
  --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.25rem; /* 36px */
  --text-5xl: 2.5rem; /* 40px */

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

  /* 行間（エレガント重視: 見出しは引き締め、本文はゆったり） */
  --leading-tight: 1.35; /* 見出し */
  --leading-snug: 1.55; /* サブ見出し・リード文 */
  --leading-normal: 1.75; /* 本文 */
  --leading-relaxed: 1.85; /* 長文・説明文 */

  /* 文字間隔（日本語エレガント設定） */
  --tracking-tight: -0.01em; /* 大見出し */
  --tracking-normal: 0.02em; /* 通常見出し */
  --tracking-wide: 0.05em; /* キャプション・ラベル */
  --tracking-wider: 0.08em; /* 英語アクセント文字 */

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

  --space-1: 0.5rem; /* 8px */
  --space-2: 1rem; /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem; /* 32px */
  --space-5: 2.5rem; /* 40px */
  --space-6: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-12: 6rem; /* 96px */
  --space-16: 8rem; /* 128px */

  /* セマンティックスペーシング */
  --section-gap: var(--space-12); /* セクション間 96px (SP: 64px) */
  --section-gap-sp: var(--space-8); /* セクション間SP */
  --element-gap: var(--space-3); /* 要素間 24px */
  --card-padding: var(--space-4); /* カード内余白 32px */
  --card-padding-sm: var(--space-3); /* カード内余白SP 24px */

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

  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-padding: var(--space-3); /* 横余白 24px */
  --container-padding-sp: var(--space-2); /* 横余白SP 16px */

  /* グリッド */
  --grid-columns: 12;
  --grid-gap: var(--space-3); /* 24px */
  --grid-gap-sm: var(--space-2); /* 16px */

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

  /* 角丸 */
  --radius-sm: 8px; /* インプット・小パーツ */
  --radius-md: 16px; /* カード・パネル */
  --radius-lg: 24px; /* ボタン・ピル型・大パーツ */
  --radius-full: 9999px; /* バッジ・タグ */

  /* ボタン */
  --btn-height: 52px;
  --btn-height-sm: 40px;
  --btn-height-lg: 60px;
  --btn-padding-x: var(--space-4); /* 32px */
  --btn-padding-x-sm: var(--space-3); /* 24px */
  --btn-font-size: var(--text-base); /* 16px */
  --btn-font-size-sm: var(--text-sm); /* 14px */

  /* タップ領域（WCAG: 44px以上） */
  --tap-target-min: 44px;

  /* シャドウ（パープル系の柔らかいシャドウ） */
  --shadow-sm: 0 2px 8px rgba(123, 94, 167, 0.08);
  --shadow-md: 0 4px 20px rgba(123, 94, 167, 0.12); /* デザインシステム定義値 */
  --shadow-lg: 0 8px 40px rgba(123, 94, 167, 0.16);
  --shadow-hover: 0 12px 48px rgba(123, 94, 167, 0.22);

  /* アイコン（Phosphor Icons） */
  --icon-size: 24px;
  --icon-stroke: 1.5px;

  /* トランジション */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-hover: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* =============================================
   * ブレイクポイント（CSS内参照用・メモ）
   * ============================================= */
  /* SP:     〜 767px */
  /* Tablet: 768px 〜 1023px */
  /* PC:     1024px 〜 */
}

/* =============================================
 * ダークモード（現時点では色反転なし・構造のみ保持）
 * ============================================= */
@media (prefers-color-scheme: dark) {
  /* 美容クリニックのブランドカラーはライトモード優先のため、
   * ダークモード自動切り替えは行わない。
   * 将来対応が必要な場合はここに定義を追加する。 */
}