/**
 * 사주살롱 CSS 변수 통합 파일
 * 모든 색상, 폰트, 스페이싱 변수를 한 곳에서 관리합니다.
 *
 * 사용법:
 * <link rel="stylesheet" href="css/variables.css">
 */

/* ============================================
   1. 라이트 모드 (기본값)
   ============================================ */
:root {
    /* 폰트 */
    --font-body: 'Pretendard', 'Noto Sans KR', sans-serif;
    --font-title: 'Noto Serif KR', serif;

    /* Primary Colors */
    --primary: #8B5CF6;
    --primary-light: #A78BFA;
    --primary-dark: #7C3AED;
    --primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);

    /* Secondary Colors */
    --secondary: #EC4899;
    --secondary-light: #F472B6;

    /* Accent Colors */
    --accent-mint: #34D399;
    --accent-sky: #38BDF8;
    --accent-yellow: #FBBF24;
    --accent-red: #EF4444;

    /* Background Colors - Light Mode */
    --bg-main: #F8F9FC;
    --bg-card: #FFFFFF;
    --bg-section: #F3F4F8;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* Text Colors - Light Mode */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-subtle: #9CA3AF;
    --text-dark: #1F2937;
    --text-light: #FFFFFF;

    /* Border Colors - Light Mode */
    --border-light: #E5E7EB;
    --border-card: rgba(139, 92, 246, 0.1);
    --border-input: #D1D5DB;
    
    /* Additional Background Colors - Light Mode */
    --bg-light: #F3F4F8;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Shadow - Light Mode */
    --shadow-card: 0 2px 12px rgba(139, 92, 246, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(139, 92, 246, 0.15);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-button: 0 4px 15px rgba(139, 92, 246, 0.3);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    /* Navigation */
    --nav-height: 60px;
    --bottom-nav-height: 64px;
}

/* ============================================
   2. 다크 모드
   ============================================ */
html.dark {
    /* Background Colors - Dark Mode */
    --bg-main: #0F0F1E;
    --bg-card: rgba(42, 45, 60, 0.7);
    --bg-section: #1A1A2E;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-light: #1A1A2E;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Text Colors - Dark Mode */
    --text-primary: #F5F5F5;
    --text-secondary: #B8B8B8;
    --text-muted: #8B8B8B;
    --text-subtle: #8B8B8B;
    --text-dark: #F5F5F5;
    --text-light: #1F2937;

    /* Border Colors - Dark Mode */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-card: rgba(139, 92, 246, 0.2);
    --border-input: rgba(255, 255, 255, 0.2);

    /* Shadow - Dark Mode */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 24px rgba(139, 92, 246, 0.25);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================
   3. 추가 색상 변수
   ============================================ */
:root {
    /* Gradient */
    --primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    
    /* Success/Warning/Error */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
}

html.dark {
    /* Gradient (다크 모드용) */
    --primary-gradient: linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
}

/* ============================================
   4. 기본 스타일 리셋 (common-components.css로 이동됨)
   ============================================ */

/* ============================================
   5. 유틸리티 클래스
   ============================================ */

/* 텍스트 색상 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent-primary { color: var(--primary); }
.text-accent-secondary { color: var(--secondary); }
.text-error { color: var(--accent-red); }
.text-success { color: var(--accent-mint); }

/* 배경 색상 */
.bg-main { background-color: var(--bg-main); }
.bg-card { background-color: var(--bg-card); }
.bg-section { background-color: var(--bg-section); }

/* 그라디언트 텍스트 */
.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 표시/숨김 */
.hidden { display: none !important; }
.visible { display: block; }

/* 화면 전환용 */
.screen { display: none !important; }
.screen.active { display: flex !important; flex-direction: column; }