:root {
  /* ---------- カラー定義 ---------- */
  /* メインカラー - ネイビーブルー系（信頼性）*/
  --color-primary: #1D3557;
  --color-primary-dark: #152538;
  --color-primary-light: #456285;
  --color-primary-lighter: #E6EBF2;

  /* アクセントカラー - 日本（赤/オレンジ）*/
  --color-accent: #FF9500;
  --color-accent-dark: #E68600;
  --color-accent-light: #FFBE66;
  --color-accent-lighter: #FFF1E0;

  /* アソートカラー - ミャンマー（黄色/ゴールド）*/
  --color-assort: #FFD700;
  --color-assort-dark: #E6C200;
  --color-assort-light: #FFE45C;
  --color-assort-lighter: #FFFAE6;

  /* 信頼を表すカラー - ブルー系 */
  --color-trust: #3B6D9B;
  --color-trust-light: #EAF0F6;

  /* セカンダリカラー */
  --color-secondary: #457B9D;
  --color-secondary-dark: #366483;
  --color-secondary-light: #A8DADC;

  /* 状態カラー */
  --color-success: #2A9D8F;
  --color-success-dark: #237d73;
  --color-success-light: #E6F4F1;
  
  --color-error: #E63946;
  --color-error-dark: #c3313d;
  --color-error-light: #FCEBEC;
  
  --color-warning: #FFB000;
  --color-warning-dark: #e69f00;
  --color-warning-light: #FFF5E6;
  
  --color-info: #457B9D;
  --color-info-dark: #386483;
  --color-info-light: #ECF2F6;

  /* テキストカラー */
  --color-text: #1D3557;
  --color-text-light: #457B9D;
  --color-text-muted: #6C757D;
  
  /* 背景・ボーダーカラー */
  --color-bg: #FFFFFF;
  --color-bg-light: #F8F9FA;
  --color-bg-alt: #EAF0F6;
  --color-border: #DEE2E6;
  --color-border-dark: #CED4DA;
  
  /* 基本カラー */
  --color-white: #FFF;
  --color-black: #000;
  --color-gray: #E9ECEF;
  --color-gray-dark: #6C757D;

  /* オーバーレイ・透過色 */
  --color-overlay: rgba(29, 53, 87, 0.5);
  --color-overlay-light: rgba(29, 53, 87, 0.1);
  --color-modal-bg: rgba(21, 37, 56, 0.8);
  --color-overlay-gradient: linear-gradient(transparent, rgba(29, 53, 87, 0.8));
  --color-overlay-gradient-hover: linear-gradient(transparent, rgba(255, 149, 0, 0.8));

  /* ---------- シャドウ定義 ---------- */
  --shadow-small: 0 2px 5px rgba(29, 53, 87, 0.1);
  --shadow-medium: 0 5px 15px rgba(29, 53, 87, 0.1);
  --shadow-large: 0 10px 30px rgba(29, 53, 87, 0.2);
  --shadow-focus: 0 0 0 0.25rem rgba(29, 53, 87, 0.25);

  /* ---------- 形状定義 ---------- */
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  --border-radius-xl: 12px;
  --border-radius-circle: 50%;
  
  /* ---------- トランジション ---------- */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ---------- スペーシング定義 ---------- */
  --spacing-xxs: 2px;
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 50px;
  --spacing-section: 80px;

  /* グリッドギャップ */
  --grid-gap-sm: 10px;
  --grid-gap-md: 20px;
  --grid-gap-lg: 30px;
  --grid-gap-xl: 40px;
  --grid-gap-xxl: 60px;

  /* ---------- フォント定義 ---------- */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-md: 1.125rem;  /* 18px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-xxl: 1.875rem; /* 30px */
  --font-size-xxxl: 2.5rem;  /* 40px */
  --font-size-huge: 3.5rem;  /* 56px */

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

  /* フォントファミリー */
  --font-family-base: "Noto Sans Myanmar", sans-serif;
  --font-family-heading: "Noto Sans Myanmar", sans-serif;

  /* ---------- レイアウト定義 ---------- */
  /* コンテナ幅 */
  --container-max-width: 1200px;
  --container-padding: 15px;
  
  /* Z-index階層 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ---------- コンポーネント固有の変数 ---------- */
  /* ヘッダー */
  --header-height: 80px;
  --header-bg: var(--color-bg);
  --header-color: var(--color-text);
  
  /* ナビゲーション */
  --nav-bg: var(--color-primary);
  --nav-color: var(--color-white);
  --nav-hover-bg: rgba(255, 149, 0, 0.2);
  --nav-hover-color: var(--color-accent);
  
  /* フッター */
  --footer-bg: var(--color-primary);
  --footer-color: var(--color-white);
  --footer-link-color: #ddd;
  --footer-link-hover-color: var(--color-accent);
  
  /* ボタン */
  --btn-padding-x: 25px;
  --btn-padding-y: 12px;
  --btn-font-weight: var(--font-weight-semibold);
  --btn-border-width: 2px;
  --btn-border-radius: var(--border-radius-small);
  
  /* フォーム */
  --form-group-margin-bottom: 20px;
  --form-control-padding-x: 15px;
  --form-control-padding-y: 10px;
  --form-control-border: 1px solid var(--color-border);
  --form-control-border-radius: var(--border-radius-small);
  --form-control-bg: var(--color-bg);
  
  /* カード */
  --card-bg: var(--color-bg);
  --card-border-radius: var(--border-radius-medium);
  --card-padding: 20px;
  --card-shadow: var(--shadow-small);
  --card-hover-transform: translateY(-5px);
  --card-hover-shadow: var(--shadow-medium);
  
  /* サービスカード */
  --service-card-padding: 30px;
  --service-icon-size: 2.5rem;
  
  /* 商品カード */
  --product-card-img-height: 200px;
  --thumbnail-size: 70px;
  
  /* ニュース関連 */
  --news-image-height: 180px;
  --news-date-bg: var(--color-primary-lighter);
  --news-date-color: var(--color-primary);
  --news-day-bg: var(--color-primary);
  --news-day-color: var(--color-white);
  
  /* セクション設定 */
  --section-padding: var(--spacing-section) 0;
  --section-margin-bottom: var(--spacing-section);
  
  /* タイトル */
  --title-margin-bottom: var(--spacing-md);
  --title-color: var(--color-primary);
  
  /* FAQトグル */
  --faq-toggle-size: 24px;

  /* ミニカート */
  --mini-cart-width: 320px;
  --mini-cart-max-height: 70vh;
  --mini-cart-shadow: var(--shadow-large);

  /* カート送料無料ラインのしきい値 */
  --cart-free-shipping-threshold: 10000;

  /* ---------- レスポンシブブレークポイント ---------- */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1023px;
  --breakpoint-xl: 1200px;
}

/* ---------- ダークモード設定（今後の拡張用） ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモードサポートは将来の拡張用に予約 */
  }
}

/* ---------- モバイル向け調整 ---------- */
@media (max-width: 768px) {
  :root {
    /* モバイル向けにパディングを小さく */
    --service-card-padding: 20px;
    --spacing-section: 50px;
    --spacing-xxl: 30px;
    
    /* フォントサイズを少し小さく */
    --font-size-xxxl: 2rem;
    --font-size-huge: 2.5rem;
    --font-size-xxl: 1.75rem;
    --font-size-xl: 1.375rem;
    
    /* カードの高さを調整 */
    --product-card-img-height: 180px;
    
    /* モバイル向けボタンサイズ調整 */
    --btn-padding-x: 20px;
    --btn-padding-y: 10px;
  }
}

/* ---------- 小型モバイル向け調整 ---------- */
@media (max-width: 480px) {
  :root {
    /* さらに小さいデバイス向けに調整 */
    --spacing-section: 40px;
    --spacing-xxl: 25px;
    --spacing-xl: 20px;
    
    /* グリッドのギャップを小さく */
    --grid-gap-lg: 20px;
    --grid-gap-md: 15px;
    
    /* カードサイズの調整 */
    --product-card-img-height: 160px;
  }
}