/* ========================================
   Main CSS - ベーススタイルと変数定義
   ======================================== */

/* CSS変数定義（統一） */
:root {
    --deep-slate: #0F172A;
    --bronze-accent: #937B4D;
    --stone-white: #F9F8F6;
    --iron-gray: #334155;
    --text-dark: #111827;
    --text-sub: #374151;
    --grid-line: rgba(15, 23, 42, 0.03);
    
    /* スペーシング・タイポグラフィ */
    --spacing-unit: 1rem;
    --font-size-base: 1rem;
}

/* リセット・ベーススタイル */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-dark);
    background-color: var(--stone-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* フォントファミリー */
.font-serif {
    font-family: 'Noto Serif JP', serif;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

/* 背景グリッド */
.bg-grid {
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* ユーティリティクラス */
.text-deep-slate {
    color: var(--deep-slate);
}

.text-bronze-accent {
    color: var(--bronze-accent);
}

.bg-deep-slate {
    background-color: var(--deep-slate);
}

.bg-stone-white {
    background-color: var(--stone-white);
}

.bg-bronze-accent {
    background-color: var(--bronze-accent);
}