/* ===================================
   variables.css - 디자인 시스템
   동원이엔지(합) 브랜드 컬러
   =================================== */

:root {
    /* ===== 메인 컬러 ===== */
    --color-primary: #e85a24;        /* 동원이엔지 오렌지 */
    --color-primary-light: #ff6b35;
    --color-primary-dark: #c94a1a;
    
    /* ===== 라이트 테마 배경 (기존 다크 → 라이트로 전환) =====
       변수 이름은 그대로 두고 값만 밝게 바꿔서, 모든 CSS가 자동 반영됩니다 */
    --color-bg-dark: #ffffff;        /* 페이지 기본 배경 */
    --color-bg-section: #f4f6f9;     /* 섹션 배경 (연한 회색) */
    --color-bg-card: #ffffff;        /* 카드 배경 */
    --color-bg-hover: #eef1f6;       /* 호버 배경 */
    
    /* ===== 텍스트 컬러 (밝은 배경용, 진한 남색 계열 - 새까맣지 않음) ===== */
    --color-text-white: #16202b;     /* 제목 등 가장 진한 텍스트 */
    --color-text-light: #3f4a57;     /* 본문 텍스트 */
    --color-text-muted: #7b8794;     /* 보조 텍스트 */
    --color-text-dark: #333333;
    
    /* 오렌지 등 컬러 배경 위에 올라가는 글자색 */
    --color-on-accent: #ffffff;
    /* 테두리 (라이트 테마에서 카드/구분선용) */
    --color-border: #e3e7ee;
    
    /* ===== 포인트 컬러 ===== */
    --color-accent: #00d4ff;         /* 테크/사이버 느낌 */
    --color-accent-green: #00c853;   /* 성공/온라인 */
    --color-accent-red: #ff4757;     /* 경고/에러 */
    
    /* ===== 그라데이션 ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-dark: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-section) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(15,15,26,0) 0%, rgba(15,15,26,0.8) 100%);
    
    /* ===== 폰트 ===== */
    --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-english: 'Montserrat', var(--font-primary);
    
    /* ===== 폰트 사이즈 ===== */
    --text-xs: 1.2rem;
    --text-sm: 1.4rem;
    --text-base: 1.6rem;
    --text-lg: 1.8rem;
    --text-xl: 2rem;
    --text-2xl: 2.4rem;
    --text-3xl: 3rem;
    --text-4xl: 3.6rem;
    --text-5xl: 4.8rem;
    --text-hero: 6rem;
    
    /* ===== 폰트 굵기 ===== */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* ===== 간격 ===== */
    --space-xs: 0.4rem;
    --space-sm: 0.8rem;
    --space-md: 1.6rem;
    --space-lg: 2.4rem;
    --space-xl: 3.2rem;
    --space-2xl: 4.8rem;
    --space-3xl: 6.4rem;
    --space-4xl: 9.6rem;
    
    /* ===== 레이아웃 ===== */
    --max-width: 1400px;
    --header-height: 80px;
    --header-height-scroll: 64px;
    
    /* ===== 둥글기 ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* ===== 그림자 ===== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --shadow-glow: 0 0 20px rgba(232,90,36,0.3);
    
    /* ===== 트랜지션 ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===== 반응형 브레이크포인트 ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}