/* ========================================
   カスタム設定ファイル (custom.css)
   フォントと色の設定を一括管理
   ======================================== */

/* ========================================
   フォント設定
   ======================================== */

/* Interフォントのローカル定義 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/font/inter-400.ttf') format('truetype'),
         url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/font/inter-500.ttf') format('truetype'),
         url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/font/inter-600.ttf') format('truetype'),
         url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/font/inter-700.ttf') format('truetype'),
         url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf') format('truetype');
}

/* Material Symbols Outlinedフォントのローカル定義 */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/font/material-symbols-outlined-300.ttf') format('truetype'),
         url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v290/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDDxHOem.ttf') format('truetype');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/font/material-symbols-outlined-400.ttf') format('truetype'),
         url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v290/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOem.ttf') format('truetype');
}

/* ========================================
   色設定（CSS変数）
   ======================================== */

:root {
    /* メインカラーパレット */
    --primary-bg: #f7f7f7;           /* メイン背景色 */
    --primary-text: #1f2937;       /* メインテキスト色 */
    --secondary-text: #374151;      /* セカンダリテキスト色 */
    --muted-text: #6b7280;          /* ミュートテキスト色 */
    --light-text: #9ca3af;          /* ライトテキスト色 */
    
    /* アレルゲン関連色 */
    --allergen-mandatory-bg: #fde8e8;    /* 特定原材料背景色 */
    --allergen-mandatory-text: #991b1b;  /* 特定原材料テキスト色 */
    --allergen-mandatory-border: #fca5a5; /* 特定原材料ボーダー色 */
    
    --allergen-optional-bg: #fef3c7;     /* 特定原材料に準ずるもの背景色 */
    --allergen-optional-text: #92400e;   /* 特定原材料に準ずるものテキスト色 */
    --allergen-optional-border: #fbbf24;  /* 特定原材料に準ずるものボーダー色 */
    
    --allergen-category-bg: #e5e7eb;     /* カテゴリ背景色 */
    --allergen-category-text: #374151;   /* カテゴリテキスト色 */
    --allergen-category-border: #d1d5db; /* カテゴリボーダー色 */
    
    /* UI要素色 */
    --white: #ffffff;               /* 白 */
    --black: #000000;               /* 黒 */
    --gray-50: #f9fafb;            /* ライトグレー */
    --gray-100: #f3f4f6;           /* グレー100 */
    --gray-200: #e5e7eb;           /* グレー200 */
    --gray-300: #d1d5db;           /* グレー300 */
    --gray-400: #9ca3af;           /* グレー400 */
    --gray-500: #6b7280;           /* グレー500 */
    --gray-600: #4b5563;           /* グレー600 */
    --gray-700: #374151;           /* グレー700 */
    --gray-800: #1f2937;           /* グレー800 */
    --gray-900: #111827;           /* グレー900 */
    
    /* アクセント色 */
    --accent-blue: #93c5fd;         /* アクセントブルー */
    --accent-green: #86efac;        /* アクセントグリーン */
    --accent-green-dark: #166534;   /* ダークグリーン */
    --accent-green-bg: #dcfce7;     /* グリーン背景 */
    
    /* モーダル・オーバーレイ */
    --modal-overlay: rgba(0, 0, 0, 0.5); /* モーダルオーバーレイ */
    
    /* ボタン色 */
    --btn-primary: #111827;         /* プライマリボタン */
    --btn-primary-hover: #374151;   /* プライマリボタンホバー */
    --btn-secondary: #374151;      /* セカンダリボタン */
    
    /* ========================================
       レスポンシブ画像設定（CSS変数）
       ======================================== */
    
    /* ブレークポイント定義 */
    --breakpoint-sm: 640px;         /* スマートフォン */
    --breakpoint-md: 768px;         /* タブレット */
    --breakpoint-lg: 1024px;        /* デスクトップ */
    --breakpoint-xl: 1280px;        /* 大型デスクトップ */
    
    /* メインビジュアル画像設定 (mv_001) */
    --mv-001-sm-width: 256px;       /* スマートフォン: 640px以上 */
    --mv-001-sm-height: 192px;
    --mv-001-md-width: 384px;       /* タブレット: 768px以上 */
    --mv-001-md-height: 288px;
    --mv-001-lg-width: 512px;       /* デスクトップ: 1024px以上 */
    --mv-001-lg-height: 384px;
    --mv-001-xl-width: 576px;       /* 大型デスクトップ: 1280px以上 */
    --mv-001-xl-height: 432px;
    
    /* 画像品質設定 */
    --image-quality: 85;            /* WebP品質（推奨：80-90） */
}

/* ========================================
   フォント適用
   ======================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--primary-bg);
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
}

/* ========================================
   色適用（主要な要素）
   ======================================== */

/* テキスト色 */
.text-primary { color: var(--primary-text) !important; }
.text-secondary { color: var(--secondary-text) !important; }
.text-muted { color: var(--muted-text) !important; }
.text-light { color: var(--light-text) !important; }

/* 背景色 */
.bg-primary { background-color: var(--primary-bg) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-gray-50 { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }

/* アレルゲン関連色 */
.allergen-mandatory {
    background-color: var(--allergen-mandatory-bg);
    color: var(--allergen-mandatory-text);
    border-color: var(--allergen-mandatory-border);
}

.allergen-optional {
    background-color: var(--allergen-optional-bg);
    color: var(--allergen-optional-text);
    border-color: var(--allergen-optional-border);
}

.allergen-category {
    background-color: var(--allergen-category-bg);
    color: var(--allergen-category-text);
    border-color: var(--allergen-category-border);
}

/* ボタン色 */
.btn-primary {
    background-color: var(--btn-primary);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
}

/* ========================================
   カスタマイズ用のユーティリティクラス
   ======================================== */

/* フォントサイズのカスタマイズ */
.font-custom-xs { font-size: 0.75rem; }
.font-custom-sm { font-size: 0.875rem; }
.font-custom-base { font-size: 1rem; }
.font-custom-lg { font-size: 1.125rem; }
.font-custom-xl { font-size: 1.25rem; }
.font-custom-2xl { font-size: 1.5rem; }

/* カスタム色の追加用 */
.color-custom-1 { color: var(--custom-color-1, #000000); }
.color-custom-2 { color: var(--custom-color-2, #000000); }
.color-custom-3 { color: var(--custom-color-3, #000000); }

.bg-custom-1 { background-color: var(--custom-bg-1, #ffffff); }
.bg-custom-2 { background-color: var(--custom-bg-2, #ffffff); }
.bg-custom-3 { background-color: var(--custom-bg-3, #ffffff); }

/* ========================================
   設定変更のガイド
   ======================================== */

/*
使用方法：
1. 色を変更したい場合は、:root セクションのCSS変数を変更してください
2. フォントを変更したい場合は、@font-face セクションを編集してください
3. 新しい色を追加したい場合は、:root セクションに新しい変数を追加し、
   必要に応じてユーティリティクラスを作成してください

例：
- メイン背景色を変更: --primary-bg: #f0f0f0;
- 新しい色を追加: --custom-color-1: #ff6b6b;
- フォントを変更: font-family: 'Noto Sans JP', sans-serif;
*/