/* 
==================================================================
필라테스 호두 CSS 변수 정의
- Phase 1: CSS 변수 추출 (CLAUDE.md 가이드라인 준수)
- 모든 HTML 파일에서 공통으로 사용할 색상 및 폰트 변수
==================================================================
*/

:root {
    /* === 색상 팔레트 === */
    --deep-navy: #001F3F;
    --golden-brown: #996515;
    --warm-beige: #F5F1E8;
    --soft-cream: #FEFCF8;
    --charcoal-gray: #2C2C2C;
    --accent-gold: #D4AF37;
    
    /* === 폰트 패밀리 === */
    --font-korean: 'Noto Sans KR', sans-serif;
    --font-english: 'Manrope', sans-serif;
    --font-display: 'Inter', sans-serif;
    --font-body: 'Manrope', 'Noto Sans KR', sans-serif;
    
    /* === 색상 유틸리티 클래스용 변수 === */
    --bg-deep-navy: var(--deep-navy);
    --bg-golden-brown: var(--golden-brown);
    --bg-warm-beige: var(--warm-beige);
    --bg-accent-gold: var(--accent-gold);
    --bg-soft-cream: var(--soft-cream);
    
    --text-deep-navy: var(--deep-navy);
    --text-golden-brown: var(--golden-brown);
    --text-charcoal-gray: var(--charcoal-gray);
    --text-accent-gold: var(--accent-gold);
    --text-white: #ffffff;
    
    /* === 호버 상태 색상 === */
    --hover-deep-navy-dark: #001122;
    --hover-golden-brown: var(--golden-brown);
    --hover-gray-light: #d1d5db;
}

/* === 기본 Body 스타일 === */
body {
    font-family: var(--font-body);
    background-color: var(--soft-cream);
    color: var(--charcoal-gray);
}

/* === 폰트 유틸리티 클래스 === */
.font-eng { 
    font-family: var(--font-english); 
}

.font-inter { 
    font-family: var(--font-display); 
}

/* === 배경색 유틸리티 클래스 === */
.bg-deep-navy { 
    background-color: var(--bg-deep-navy); 
}

.bg-golden-brown { 
    background-color: var(--bg-golden-brown); 
}

.bg-warm-beige { 
    background-color: var(--bg-warm-beige); 
}

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

/* === 텍스트 색상 유틸리티 클래스 === */
.text-deep-navy { 
    color: var(--text-deep-navy); 
}

.text-golden-brown { 
    color: var(--text-golden-brown); 
}

.text-charcoal-gray { 
    color: var(--text-charcoal-gray); 
}

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

.text-white { 
    color: var(--text-white); 
}

/* === 호버 상태 유틸리티 클래스 === */
.hover\:bg-deep-navy-dark:hover { 
    background-color: var(--hover-deep-navy-dark); 
}

.hover\:text-golden-brown:hover { 
    color: var(--hover-golden-brown); 
}