/* CSS Variables - 統一デザインシステム */

/* ========================================
   基本色パレット（Bootstrap 5.3準拠）
   ======================================== */
:root {
  /* プライマリカラー */
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #0dcaf0;
  --color-light: #f8f9fa;
  --color-dark: #212529;
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* グレースケール体系 */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  
  /* カレンダー専用色 */
  --calendar-today-bg: #fff3cd;
  --calendar-holiday-bg: #f8d7da;
  --calendar-other-month-bg: var(--gray-100);
  --calendar-weekend-bg: var(--gray-100);
  --calendar-info-bg: #e7f3ff;
  --calendar-info-border: #b8daff;
  --calendar-weekday-bg: var(--gray-600);
  
  /* バッジ色（カレンダー専用） */
  --badge-visiting: #6f42c1;
}

/* ========================================
   スペーシング体系（rem単位）
   ======================================== */
:root {
  --spacing-1: 0.0625rem;   /* 1px */
  --spacing-2: 0.125rem;    /* 2px */
  --spacing-3: 0.1875rem;   /* 3px */
  --spacing-4: 0.25rem;     /* 4px */
  --spacing-6: 0.375rem;    /* 6px */
  --spacing-8: 0.5rem;      /* 8px */
  --spacing-12: 0.75rem;    /* 12px */
  --spacing-16: 1rem;       /* 16px */
  --spacing-20: 1.25rem;    /* 20px */
  --spacing-24: 1.5rem;     /* 24px */
  --spacing-32: 2rem;       /* 32px */
  
  /* レイアウト用サイズ */
  --size-60: 60px;
  --size-80: 80px;
  --size-100: 100px;
  --size-120: 120px;
  
  /* ボーダー幅 */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
}

/* ========================================
   フォントサイズ体系
   ======================================== */
:root {
  --font-xs: 0.4375rem;     /* 7px - 超小サイズ */
  --font-sm: 0.5rem;        /* 8px - 小サイズ */
  --font-base: 0.625rem;    /* 10px - ベースサイズ */
  --font-md: 0.75rem;       /* 12px - 中サイズ */
  --font-lg: 1rem;          /* 16px - 大サイズ */
  --font-xl: 1.25rem;       /* 20px - 特大サイズ */
  
  /* レスポンシブフォントサイズ */
  --font-sm-mobile: 0.5rem;      /* 8px */
  --font-base-mobile: 0.625rem;  /* 10px */
  --font-md-mobile: 0.75rem;     /* 12px */
  --font-sm-tablet: 0.5625rem;   /* 9px */
  --font-base-tablet: 0.625rem;  /* 10px */
  --font-md-tablet: 0.6875rem;   /* 11px */
}

/* ========================================
   ボーダー半径・シャドウ
   ======================================== */
:root {
  /* ボーダー半径 */
  --border-radius-sm: 0.1875rem;  /* 3px */
  --border-radius-md: 0.375rem;   /* 6px */
  --border-radius-lg: 0.5rem;     /* 8px */
  
  /* シャドウ効果 */
  --shadow-basic: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-enhanced: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
  --shadow-small: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
}

/* ========================================
   アニメーション・トランジション
   ======================================== */
:root {
  /* 基本アニメーション設定 */
  --transition-duration-fast: 150ms;
  --transition-duration-base: 200ms;
  --transition-duration-slow: 300ms;
  --transition-timing: ease-in-out;
  --transition-delay: 0ms;
  
  /* ホバー効果設定（既存との互換性維持） */
  --hover-transition-duration: var(--transition-duration-base);
  --hover-transition-timing: var(--transition-timing);
  --hover-transition-delay: var(--transition-delay);
  
  /* will-changeプロパティ */
  --will-change-standard: transform, background-color, box-shadow;
  --will-change-opacity: opacity;
  --will-change-auto: auto;
}

/* ========================================
   ホバー効果色（既存システムとの互換性維持）
   ======================================== */
:root {
  /* 基本ホバー色 */
  --hover-bg-primary: rgba(13, 110, 253, 0.1);
  --hover-bg-secondary: rgba(108, 117, 125, 0.15);
  --hover-bg-warning: rgba(255, 193, 7, 0.2);
  --hover-bg-info: rgba(13, 202, 240, 0.1);
  --hover-bg-danger: rgba(220, 53, 69, 0.1);
  --hover-bg-opacity: 0.1;
  
  /* ホバーシャドウ */
  --hover-shadow-basic: var(--shadow-basic);
  --hover-shadow-enhanced: var(--shadow-enhanced);
  
  /* パフォーマンス最適化 */
  --hover-will-change-standard: var(--will-change-standard);
}

/* ========================================
   レスポンシブブレークポイント
   ======================================== */
:root {
  /* ブレークポイント定数（メディアクエリ用参考値） */
  --breakpoint-sm: 480px;   /* スマートフォン */
  --breakpoint-md: 768px;   /* タブレット */
  --breakpoint-lg: 992px;   /* デスクトップ小 */
  --breakpoint-xl: 1200px;  /* デスクトップ大 */
}

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

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  :root {
    --hover-bg-primary: rgba(0, 0, 0, 0.15);
    --hover-shadow-basic: var(--shadow-enhanced);
    
    /* カレンダー専用高コントラスト色 */
    --hover-bg-warning: rgba(255, 193, 7, 0.4);
    --hover-bg-info: rgba(13, 202, 240, 0.2);
    --hover-bg-danger: rgba(220, 53, 69, 0.2);
    
    /* ボーダー強化 */
    --border-contrast-today: 2px dashed currentColor;
    --border-contrast-weekend: 3px solid currentColor;
  }
}

/* ========================================
   レスポンシブ最適化
   ======================================== */

/* スマートフォン（～480px） */
@media (max-width: 480px) {
  :root {
    --transition-duration-base: var(--transition-duration-fast);
    --hover-bg-opacity: 0.05;
    --shadow-basic: var(--shadow-small);
  }
}

/* タブレット（481px～768px） */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --transition-duration-base: 180ms;
    --hover-bg-opacity: 0.08;
  }
}

/* デスクトップ（769px～） */
@media (min-width: 769px) {
  :root {
    --transition-duration-base: 200ms;
    --hover-bg-opacity: 0.1;
  }
}

/* ========================================
   モーション設定対応
   ======================================== */

/* アニメーション軽減設定 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration-fast: 50ms;
    --transition-duration-base: 50ms;
    --transition-duration-slow: 100ms;
    --hover-transition-duration: 50ms;
  }
}

/* ========================================
   CSS Variables フォールバック・互換性対応
   ======================================== */

/* CSS Variables非対応ブラウザ向けフォールバック定義は
   各コンポーネントファイル内で@supportsルールを使用して実装 */