/**
 * 変数（カラー、フォント、余白）設定
 * ベーススタイル
 * BEM設計方針：すべてのCSSでこれらの変数を使用すること
 */

:root {
    /* ========================================
       ブランドカラー
       ======================================== */
    /* Main（メインカラー） */
    --color-main: #2c2c2c;
    --color-main-light: #4a4a4a;
    --color-main-dark: #1a1a1a;
    
    /* Accent（アクセントカラー） */
    --color-accent: #d4a574;
    --color-accent-light: #e8c9a0;
    --color-accent-dark: #b8905a;
    
    /* Text（テキストカラー） */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-lighter: #999999;
    --color-text-inverse: #ffffff;
    
    /* Background（背景カラー） */
    --color-background: #ffffff;
    --color-background-light: #f8f8f8;
    --color-background-dark: #f0f0f0;
    
    /* レガシー互換用（既存コードとの互換性） */
    --color-primary: var(--color-main);
    --color-secondary: var(--color-background);
    
    /* ========================================
       フォントファミリー
       女性経営者らしい上品な明朝体とゴシック体の使い分け
       ======================================== */
    /* 明朝体（見出し・タイトル用：上品な印象） */
    --font-family-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', 'MS PMincho', serif;
    
    /* ゴシック体（本文用：読みやすさ重視） */
    --font-family-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
    
    /* ベースフォント（デフォルトはゴシック体） */
    --font-family-base: var(--font-family-sans);
    
    /* フォントサイズ */
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;
    
    /* 行間 */
    --line-height-base: 1.8;
    --line-height-tight: 1.5;
    --line-height-loose: 2.0;
    
    /* フォントウェイト */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* ========================================
       基本の余白（Spacing）
       ======================================== */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 48px;
    
    /* 追加の余白（必要に応じて） */
    --spacing-7: 64px;
    --spacing-8: 96px;
}

/* ========================================
   ベーススタイル
   ======================================== */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-background);
    font-weight: var(--font-weight-normal);
    margin: 0;
    padding: 0;
}

main {
    margin: 0;
    padding: 0;
}

/* 見出しは明朝体を使用（上品な印象） */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-serif);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

/* 本文はゴシック体を使用（読みやすさ重視） */
p, li, span, a, div {
    font-family: var(--font-family-sans);
}