/* ========================================
   WANPAKU統一CSS変数システム
   全サイト共通のデザイントークン定義
   Version: 1.0.0
======================================== */

:root {
    /* メインカラーパレット（WANPAKU_CONFIG.colorsと同期） */
    --primary: #2c2c2c;
    --primary-light: #4a4a4a;
    --accent: #c9a96e;
    --accent-light: #e8d5b7;
    --accent-dark: #a08552;
    
    /* ニュートラルカラー */
    --white: #ffffff;
    --off-white: #fefefe;
    --light-gray: #f8f8f8;
    --mid-gray: #e5e5e5;
    --dark-gray: #666666; /* WCAG AA準拠（5.74:1）- 旧#888888（3.05:1） */
    --charcoal: #333333;
    
    /* セマンティックカラー */
    --error: #8b0000;
    --success: #4caf50;
    
    /* ブランドカラー（統一済み）*/
    --rakuten-red: #bf0000;
    --amazon-orange: #ff9900;
    
    /* モーダル状態カラー（統一デザインシステム） */
    --modal-error-bg: #fef2f2;
    --modal-error-text: #991b1b;
    --modal-error-border: #fecaca;
    
    --modal-info-bg: #f0f9ff;
    --modal-info-text: #0c4a6e;
    --modal-info-border: #0ea5e9;
    
    --modal-warning-bg: #fffbeb;
    --modal-warning-text: #92400e;
    --modal-warning-border: #f59e0b;
    
    /* シャドウ定義 */
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);
    --border-light: 1px solid #f0f0f0;
    --border-mid: 1px solid #e0e0e0;
    --border-dark: 1px solid #d0d0d0;
    
    /* Font Families（全モーダル統一） */
    --font-title: 'Crimson Text', serif;
    --font-ui: 'Noto Sans JP', 'Inter', sans-serif;
    --font-numeric: 'Inter', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
    
    /* Typography Scale（モーダル内統一） */
    --modal-title-font-size: 20px;
    --modal-title-large-font-size: 22px; /* フード詳細モーダル用 */
    --modal-title-emphasized-font-size: 24px; /* 強調タイトル用 */
    --modal-subtitle-font-size: 16px;
    --modal-text-font-size: 14px;
    --modal-text-small-font-size: 13px; /* スコア詳細用 */
    --modal-caption-font-size: 12px;
    
    /* Typography Weights（軽やかなトンマナ統一） */
    --modal-title-weight: 300;
    --modal-title-light-weight: 200; /* 極細フォント */
    --modal-subtitle-weight: 300;
    --modal-text-weight: 300;
    --modal-caption-weight: 300;
    
    /* Letter Spacing（統一スタイル） */
    --modal-letter-spacing-tight: -0.5px;
    --modal-letter-spacing-normal: 0.3px;
    --modal-letter-spacing-wide: 1.2px;
    
    /* Spacing Scale（モーダル内統一） */
    --modal-section-margin: 24px;
    --modal-element-margin: 16px;
    --modal-section-padding: 24px;
    
    /* モーダル詳細パディング/マージン（重複削除用） */
    --modal-padding-standard: 16px;
    --modal-padding-small: 12px;
    --modal-margin-standard: 16px;
    --modal-margin-small: 12px;
    --modal-margin-top-standard: 16px;
    --modal-margin-top-large: 20px;
    
    /* モーダル外観統一変数 */
    --modal-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.15);
    --modal-backdrop-blur: blur(8px);
    
    /* レスポンシブブレークポイント */
    --breakpoint-mobile: 480px;
}