/**
 * 共通CSS変数定義
 * 全テーマで使用するCSS変数を統一管理
 *
 * @package FurusatoNanae
 * @since V0.5.0
 */

/* グローバルスクロール設定 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 200px;
}

:root {
    /* ========================================
       カラーシステム（プライマリ）
       ======================================== */
    --color-primary: #125F86;
    --color-secondary: #2e7d32;
    --color-accent: #125F86;
    --color-dark-green: #1b5e20;

    /* テキストカラー */
    --text-primary: #333;
    --text-secondary: #666;
    --text-gray: #666;
    --text-light: #777;
    --text-white: #fff;

    /* 価格・アクセント色 */
    --price-color: #d32f2f;
    --price-hover: #b71c1c;

    /* 背景色 */
    --bg-primary: #f8f9fa;
    --bg-secondary: #F4F1E3;
    --bg-white: #fff;
    --bg-light-gray: #f5f5f5;
    --bg-gray: #f0f0f0;

    /* ボーダー・区切り線 */
    --border-color: #e0e0e0;
    --border-gray: #ddd;

    /* ========================================
       グラデーション
       ======================================== */
    --gradient-main: linear-gradient(135deg, #2e7d32 0%, #4caf50 50%, #66bb6a 100%);
    --gradient-button: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    --gradient-hover: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);

    /* ========================================
       シャドウ
       ======================================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-portal: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* ========================================
       スペーシング
       ======================================== */
    --spacing-xs: clamp(0.5rem, 1vw, 1rem);
    --spacing-sm: clamp(1rem, 2vw, 2rem);
    --spacing-md: clamp(1.5rem, 3vw, 3rem);
    --spacing-lg: clamp(2rem, 4vw, 4rem);
    --spacing-xl: clamp(3rem, 6vw, 6rem);

    /* 固定スペーシング */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* ========================================
       フォントシステム
       ======================================== */
    --font-family-base: 'Noto Sans JP', 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
    --font-family-heading: 'Noto Serif JP', serif;

    /* フォントサイズ */
    --font-size-xs: clamp(12px, 1.2vw, 14px);
    --font-size-sm: clamp(13px, 1.3vw, 15px);
    --font-size-base: clamp(14px, 1.5vw, 16px);
    --font-size-md: clamp(16px, 1.8vw, 18px);
    --font-size-lg: clamp(18px, 2vw, 20px);
    --font-size-xl: clamp(20px, 2.5vw, 24px);
    --font-size-xxl: clamp(24px, 3vw, 28px);

    /* 行高 */
    --line-height-tight: 1.3;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;

    /* ========================================
       ブレークポイント（参考値）
       ======================================== */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;

    /* ========================================
       トランジション
       ======================================== */
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --transition-fast: all 0.2s ease;

    /* ========================================
       商品関連の専用変数
       ======================================== */
    --product-title-color: var(--color-secondary);
    --product-price-color: var(--price-color);
    --product-card-bg: var(--bg-white);
    --product-border: var(--border-color);

    /* ========================================
       ポータルボタン関連
       ======================================== */
    --portal-button-shadow: var(--shadow-portal);
    --portal-button-hover-opacity: 0.8;

    /* ========================================
       レイアウト関連
       ======================================== */
    --container-max-width: 1200px;
    --sidebar-width: 300px;
    --content-padding: 20px;
}

/* ========================================
   レスポンシブ対応の変数調整
   ======================================== */
@media (max-width: 768px) {
    :root {
        --font-size-base: clamp(13px, 1.4vw, 15px);
        --content-padding: 15px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;
        --content-padding: 12px;
    }
}

/* セクション別のスクロールパディング調整 */
#SecPickup {
    scroll-margin-top: -100px; /* 200px - 100px = 100px */
}

#TownWrap {
    scroll-margin-top: -50px; /* 200px - 50px = 150px */
}

#SecUsage {
    scroll-margin-top: -100px; /* 200px - 100px = 100px */
}

#SecFaq {
    scroll-margin-top: -150px; /* 200px - 150px = 50px */
}