/* ============================================
   CSS Variables - IAM Landing Page
   ============================================ */

:root {
  /* ===== Colors (IAM Brand) ===== */
  --color-primary: #9DC54C;        /* IAM 로고 연두색 */
  --color-primary-dark: #7FA93C;   /* 어두운 연두 */
  --color-primary-light: #B8D672;  /* 밝은 연두 */
  
  --color-secondary: #4CAF50;      /* 초록색 (보조) */
  --color-secondary-dark: #388E3C; /* 어두운 초록 */
  --color-secondary-light: #66BB6A; /* 밝은 초록 */
  
  --color-accent: #6366F1;         /* 청보라색 (강조) */
  --color-accent-dark: #4F46E5;    /* 어두운 청보라 */
  --color-accent-light: #818CF8;   /* 밝은 청보라 */
  
  --color-background: #f9fafb;
  --color-background-dark: #f3f4f6;
  --color-white: #ffffff;
  --color-black: #000000;
  
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-text-lighter: #9ca3af;
  
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  
  /* ===== Typography ===== */
  --font-family: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
  
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-base: 17px;
  --font-size-lg: 19px;
  --font-size-xl: 22px;
  --font-size-2xl: 26px;
  --font-size-3xl: 34px;
  --font-size-4xl: 42px;
  --font-size-5xl: 52px;
  --font-size-6xl: 68px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== Spacing ===== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  
  /* ===== Layout ===== */
  --container-max-width: 1200px;
  --container-padding: 24px;
  --header-height: 80px;
  --section-padding: 96px;
  
  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* ===== Border Radius ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 700ms ease;
  
  /* ===== Z-Index ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===== Mobile Override (< 768px) ===== */
@media (max-width: 767px) {
  :root {
    /* 모바일 기본 폰트 크기 증가 */
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 28px;
    --font-size-3xl: 32px;
    --font-size-4xl: 36px;
    --font-size-5xl: 40px;
    --font-size-6xl: 48px;
    
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    
    --container-padding: 16px;
    --header-height: 64px;
    --section-padding: 64px;
  }
}