/*
 * CSS Variables for BoxKun Theme
 * 색상, 폰트, 간격 등 모든 디자인 토큰 관리
 * 
 * 중요: color에 대한 transition은 사용하지 않습니다 (성능 최적화)
 */

/* ========== 폰트 정의 ========== */
/* Pretendard - 필수 웨이트만 로드 (400, 500, 600, 700) */

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url(../font/woff2-subset/Pretendard-Regular.subset.woff2) format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url(../font/woff2-subset/Pretendard-Medium.subset.woff2) format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url(../font/woff2-subset/Pretendard-SemiBold.subset.woff2) format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url(../font/woff2-subset/Pretendard-Bold.subset.woff2) format('woff2');
}

:root {
    /* ========== 색상 시스템 ========== */
    
    /* Primary Colors */
    --color-primary: #242424;
    --color-primary-hover: #191919;
    --color-background: #FFFFFF;
    --color-surface: #F9F9F9;
    --color-border: #F2F2F2;
    --color-border-dark: #E5E5E5;
    
    /* Text Colors */
    --color-text-primary: #242424;
    --color-text-secondary: #6B6B6B;
    --color-text-tertiary: rgba(0, 0, 0, 0.8);
    --color-text-inverse: #FFFFFF;
    
    /* Accent Colors */
    --color-accent: #1A8917;
    --color-accent-hover: #156D12;
    
    /* ========== 타이포그래피 ========== */
    
    /* Font Families */
    --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* Line Heights */
    --line-height-base: 1.5;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========== 간격 시스템 ========== */
    
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* ========== 레이아웃 ========== */
    
    --container-max-width: 1192px;
    --content-max-width: 760px;
    --header-height: 57px;
    
    /* ========== Border Radius ========== */
    
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    /* ========== Shadows ========== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* ========== Z-Index ========== */
    
    --z-header: 500;
    --z-modal: 1000;
    --z-tooltip: 1500;
    
    /* ========== Transitions ========== */
    /* 주의: color, background-color, border-color transition은 사용하지 않습니다 (성능 최적화) */
    
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* 안전한 transition 속성들 (transform, opacity만) */
    --transition-transform: transform var(--transition-base);
    --transition-opacity: opacity var(--transition-base);
    --transition-all-safe: opacity var(--transition-base), transform var(--transition-base);
    
    /* ========== Border Radius (추가) ========== */
    
    --radius-button: 20px;
    --radius-circle: 50%;
}

/* ========== 다크 모드 ========== */

/* 시스템 다크모드는 무시하고 사용자 선택만 따름 */
/* @media (prefers-color-scheme: dark) 제거 - 사용자 선택 우선 */

/* 다크 모드 강제 적용 클래스 - !important로 강제 우선순위 적용 */
body.dark-mode {
    --color-primary: #222222 !important;
    --color-primary-hover: #333333 !important;
    --color-background: #1a1a1a !important;
    --color-surface: #242424 !important;
    --color-border: #333333 !important;
    --color-border-dark: #404040 !important;
    --color-text-primary: #e8e8e8 !important;
    --color-text-secondary: #B3B3B3 !important;
    --color-text-tertiary: rgba(255, 255, 255, 0.8) !important;
    --color-text-inverse: #242424 !important;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5) !important;
}