/* 
 * CSS変数定義
 * Nipponich テーマ - グローバル変数
 */

:root {
  /* ===========================================
     カラーパレット
     =========================================== */

  /* プライマリカラー - 無印良品風シンプル */
  --color-primary: #1A4724;
  --color-primary-hover: #155a1e;
  --color-primary-light: #f7f7f7;
  --color-primary-gradient: linear-gradient(135deg, #1A4724 0%, #155a1e 100%);

  /* セカンダリカラー - 山吹色 */
  --color-secondary: #D9AA2B;
  --color-secondary-light: #e6b84d;
  --color-secondary-gradient: linear-gradient(135deg, #D9AA2B 0%, #e6b84d 100%);

  /* テキストカラー - シンプルで読みやすく */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-text-muted: #cccccc;
  --color-text-white: #ffffff;

  /* 背景カラー - クリーンで白ベース */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f7f7;
  --color-bg-tertiary: #f0f0f0;
  --color-bg-dark: rgba(51, 51, 51, 0.8);
  --color-bg-gradient: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);

  /* ステータスカラー */
  --color-success: #6aa832;
  --color-warning: #d4841c;
  --color-error: #c73e1d;
  --color-info: #8b7355;

  /* 企業・商品用カラー */
  --color-company: #c73e1d;
  --color-product: #6aa832;
  --color-article: #8b7355;

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

  --font-family-primary: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-secondary: "Noto Serif JP", "Yu Mincho", YuMincho,
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;

  /* 日本語フォント表示の最適化 */
  --font-display: swap;
  --text-rendering: optimizeLegibility;

  /* フォントサイズ */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.2rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;

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

  /* ラインハイト */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* ===========================================
     スペーシング
     =========================================== */

  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-base: 15px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-2xl: 50px;
  --spacing-3xl: 60px;
  --spacing-4xl: 80px;

  /* ===========================================
     レイアウト
     =========================================== */

  /* コンテナ幅 */
  --container-max-width: 1200px;
  --container-lg: 1024px;
  --container-md: 768px;
  --container-sm: 640px;
  --container-padding: 20px;
  --container-padding-mobile: 15px;

  /* ヘッダー */
  --header-height: 80px;
  --header-height-mobile: 70px;

  /* グリッド間隔 */
  --grid-gap: 30px;
  --grid-gap-mobile: 20px;

  /* ===========================================
     ボーダー・角丸
     =========================================== */

  --border-radius-sm: 4px;
  --border-radius-base: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;

  --border-width: 1px;
  --border-color: #e0e0e0;
  --border-color-hover: var(--color-primary);
  --border-color-light: #f0f0f0;
  --color-border: #e0e0e0;

  /* ===========================================
     シャドウ - より洗練された影効果
     =========================================== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-colored: 0 10px 15px -3px rgba(139, 115, 85, 0.1),
    0 4px 6px -2px rgba(139, 115, 85, 0.05);

  /* ===========================================
     Z-INDEX管理
     =========================================== */

  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-header: 1000;
  --z-index-overlay: 1500;
  --z-index-modal: 2000;
  --z-index-tooltip: 2500;

  /* ===========================================
     トランジション
     =========================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* トランジション用イージング */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ===========================================
     ブレークポイント（参考用）
     =========================================== */

  /* 
   * CSSではメディアクエリで直接値を使用
   * モバイル: 768px以下
   * タブレット: 769px - 1024px
   * デスクトップ: 1025px以上
   */

  /* ===========================================
     コンポーネント固有の変数
     =========================================== */

  /* 検索フォーム */
  --search-input-padding: var(--spacing-md) var(--spacing-3xl) var(--spacing-md)
    var(--spacing-lg);
  --search-input-padding-mobile: var(--spacing-base) var(--spacing-2xl)
    var(--spacing-base) var(--spacing-md);

  /* ボタン */
  --button-padding: var(--spacing-sm) var(--spacing-base);
  --button-padding-lg: var(--spacing-base) var(--spacing-lg);

  /* カード */
  --card-padding: var(--spacing-md);
  --card-padding-lg: var(--spacing-lg);

  /* 画像 */
  --image-aspect-ratio-16-9: 56.25%; /* 9/16 * 100 */
  --image-aspect-ratio-4-3: 75%; /* 3/4 * 100 */
  --image-aspect-ratio-1-1: 100%;
}