/**
 * ============================================================================
 * com-core-colors.css - カラーパレット定義（CSS変数）
 * ============================================================================
 * 
 * 【目的】
 * 亀ヶ池八幡宮サイト全体のカラーパレットをCSS変数（カスタムプロパティ）で定義。
 * 一箇所でカラーを管理することで、メンテナンス性と柔軟性を向上。
 * 
 * 【使用ページ】
 * 全ページ（必須・最初に読み込む）
 * 
 * 【カラーコンセプト】
 * 神社らしい優しさと品格を表現する和風パステルカラー。
 * ピンク系を基調とし、桜・梅・和菓子をイメージ。
 * 
 * 【カラーパレット構成】
 * 1. ブランドカラー（メインカラー）
 * 2. アクセントカラー
 * 3. ニュートラルカラー（背景・テキスト）
 * 4. セマンティックカラー（成功・警告・エラー）
 * 5. グラデーション定義
 * 
 * 【更新履歴】
 * 2025-10-20: 新規作成（カラーリファクタリング）
 * 
 * ============================================================================
 */

:root {
  /* ==========================================================================
     1. ブランドカラー - 神社のメインカラー（ピンク系）
     ========================================================================== */
  
  /* プライマリーピンク（濃淡5段階） */
  --color-primary-darkest: #b93c50;   /* 濃いピンク - 見出し、強調 */
  --color-primary-dark: #ec0080;      /* 濃いめピンク - アクティブ状態 */
  --color-primary: #ff69b4;           /* メインピンク - ブランドカラー */
  --color-primary-light: #ffc0cb;     /* 淡いピンク - 背景、ホバー */
  --color-primary-lightest: #fff0f5;  /* 極薄ピンク - 背景、カード */
  
  /* セカンダリーカラー（サブカラー） */
  --color-secondary: #fd9;            /* 優しい黄色 - グラデーション、アクセント */
  --color-secondary-light: #fee140;   /* 明るい黄色 - グラデーション終点 */
  --color-tertiary: #fa709a;          /* コーラルピンク - グラデーション開始 */
  
  
  /* ==========================================================================
     2. アクセントカラー - 視覚的な強調
     ========================================================================== */
  
  --color-accent-gold: #d4af37;       /* ゴールド - プレミアム感、装飾 */
  --color-accent-purple: #e5aff3;     /* ラベンダー - h4見出し */
  --color-accent-lavender: #ddccfc;   /* 薄紫 - ナビゲーションホバー */
  
  
  /* ==========================================================================
     3. ニュートラルカラー - 背景・テキスト
     ========================================================================== */
  
  /* 背景色（明るい系） */
  --color-bg-primary: #ffffff;        /* 白 - メイン背景 */
  --color-bg-secondary: #f7f7f7;      /* オフホワイト - セクション背景 */
  --color-bg-tertiary: #fcf;          /* 極薄ピンク - サイドメニュー背景 */
  --color-bg-cream: #fff4e2;          /* クリーム - カード背景 */
  --color-bg-yellow: #ffffcc;         /* 薄い黄色 - ハイライト */
  
  /* テキストカラー */
  --color-text-primary: #333333;      /* ダークグレー - メインテキスト */
  --color-text-secondary: #666666;    /* ミディアムグレー - サブテキスト */
  --color-text-tertiary: #999999;     /* ライトグレー - 補助テキスト */
  --color-text-inverse: #ffffff;      /* 白 - ダーク背景用 */
  
  /* ボーダー・区切り線 */
  --color-border-light: #e0e0e0;      /* 薄いグレー - 軽い区切り */
  --color-border-medium: #cccccc;     /* ミディアムグレー - 通常の区切り */
  --color-border-dark: #999999;       /* 濃いグレー - 強調する区切り */
  
  
  /* ==========================================================================
     4. セマンティックカラー - 意味を持つカラー
     ========================================================================== */
  
  /* 男の子（ブルー系） */
  --color-male-primary: #30c;         /* 青 - 男の子テーマ */
  --color-male-light: #bbf;           /* 薄い青 - 背景 */
  --color-male-lighter: #eef;         /* 極薄青 - セル背景 */
  
  /* 女の子（ピンク系） */
  --color-female-primary: #c03;       /* 赤ピンク - 女の子テーマ */
  --color-female-light: #fbb;         /* 薄いピンク - 背景 */
  --color-female-lighter: #fee;       /* 極薄ピンク - セル背景 */
  
  /* 警告・注意 */
  --color-warning: #ff7c5c;           /* オレンジ - 注意喚起 */
  --color-info: #17a2b8;              /* シアン - 情報 */
  --color-success: #28a745;           /* グリーン - 成功 */
  --color-danger: #dc3545;            /* レッド - エラー */
  
  
  /* ==========================================================================
     5. グラデーション定義
     ========================================================================== */
  
  /* メイングラデーション（ピンク→黄色） */
  --gradient-primary: linear-gradient(to left, #fa709a 0%, #fee140 100%);
  --gradient-primary-reverse: linear-gradient(to right, #fee140 0%, #fa709a 100%);
  
  /* ナビゲーショングラデーション */
  --gradient-nav-normal: linear-gradient(to bottom, #ffeef9, #f88);
  --gradient-nav-hover: linear-gradient(to top, #ddccfc, #f88);
  
  /* トップページグラデーション */
  --gradient-top-section: linear-gradient(to top, #fd9 0%, #fff 80%);
  --gradient-top-banner: linear-gradient(to left, rgba(255, 201, 203, 1), #b93c50);
  
  /* 優しいグラデーション（背景用） */
  --gradient-soft-yellow: linear-gradient(to bottom, #fff, #ffe7ad);
  
  
  /* ==========================================================================
     6. シャドウ定義
     ========================================================================== */
  
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-large: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  
  /* ==========================================================================
     7. フッター専用カラー（サイトイメージに合わせた明るい系）
     ========================================================================== */
  
  /* フッター背景（ピンクグラデーション） */
  --color-footer-bg-start: #fff0f5;    /* 極薄ピンク */
  --color-footer-bg-middle: #ffe4e9;   /* 薄ピンク */
  --color-footer-bg-end: #ffd1dc;      /* パステルピンク */
  
  /* フッターテキスト */
  --color-footer-text: #4a2f2f;        /* ダークブラウン（優しめ） */
  --color-footer-text-light: #6b4f4f;  /* ミディアムブラウン */
  --color-footer-heading: #b93c50;     /* 濃いピンク（見出し） */
  --color-footer-link: #ec0080;        /* 濃いめピンク（リンク） */
  --color-footer-link-hover: #b93c50;  /* さらに濃いピンク（ホバー） */
  
  /* フッターアクセント */
  --color-footer-accent: #d4af37;      /* ゴールド */
  --color-footer-border: rgba(236, 0, 128, 0.2);  /* ピンク系ボーダー */
  
  /* フッターグラデーション */
  --gradient-footer: linear-gradient(135deg, #fff0f5 0%, #ffe4e9 50%, #ffd1dc 100%);
  --gradient-footer-bottom: linear-gradient(to bottom, rgba(236, 0, 128, 0.05), rgba(236, 0, 128, 0.1));
  
  
  /* ==========================================================================
     8. レスポンシブ用変数
     ========================================================================== */
  
  /* フォントサイズ */
  --font-size-small: 0.75rem;
  --font-size-base: 1rem;
  --font-size-large: 1.2rem;
  --font-size-xlarge: 1.5rem;
  
  /* スペーシング */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* ブレークポイント（参考値：JavaScriptやメディアクエリで使用） */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1200px;
  
  
  /* ==========================================================================
     9. トランジション
     ========================================================================== */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-cubic: 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

/**
 * ============================================================================
 * ダークモード対応（将来の拡張用）
 * ============================================================================
 * 
 * 神社サイトでは基本的にライトモードを想定していて、
 * 現時点ではダークモード用の変数定義は行いません。
 * 必要に応じて以下のようにカラーを再定義できます：
 * 
 * @media (prefers-color-scheme: dark) {
 *   :root {
 *     --color-primary: #ff8dc7;
 *     --color-bg-primary: #1a1a1a;
 *   }
 * }
 * ============================================================================
 */

/**
 * ============================================================================
 * 使用例
 * ============================================================================
 * 
 * .example {
 *   background-color: var(--color-primary-light);
 *   color: var(--color-text-primary);
 *   border: 1px solid var(--color-border-medium);
 *   box-shadow: var(--shadow-medium);
 * }
 * 
 * .example:hover {
 *   background-color: var(--color-primary);
 *   transition: var(--transition-normal);
 * }
 * 
 * ============================================================================
 */

/**
 * ============================================================================
 * END OF FILE
 * ============================================================================
 */