/* ============================================
   EliMedi Design System (ACT-018)
   통합 CSS 커스텀 프로퍼티(변수) 체계
   - 모든 페이지별 CSS가 이 파일의 변수를 참조
   - WCAG 2.1 AA 대비율 준수
   - 3-tier: Primitive → Semantic → Compatibility
   ============================================ */
:root {
    /* === 1. 색상 팔레트 (Primitive) === */

    /* Primary - EliMedi teal/navy gradient */
    --em-color-primary-50:  #e6f2f5;
    --em-color-primary-100: #c0dfe6;
    --em-color-primary-200: #8bc4d0;
    --em-color-primary-300: #55a8ba;
    --em-color-primary-400: #2b8fa5;
    --em-color-primary-500: #1a5a6e;
    --em-color-primary-600: #154d5f;
    --em-color-primary-700: #0f3d4d;
    --em-color-primary-800: #0a2d39;
    --em-color-primary-900: #061e26;

    /* Blue */
    --em-color-blue-50:  #eff6ff;
    --em-color-blue-100: #dbeafe;
    --em-color-blue-200: #bfdbfe;
    --em-color-blue-300: #93c5fd;
    --em-color-blue-400: #60a5fa;
    --em-color-blue-500: #3b82f6;
    --em-color-blue-600: #2563eb;
    --em-color-blue-700: #1d4ed8;
    --em-color-blue-800: #1e40af;
    --em-color-blue-900: #1e3a8a;

    /* Purple */
    --em-color-purple-50:  #faf5ff;
    --em-color-purple-100: #ede9fe;
    --em-color-purple-200: #ddd6fe;
    --em-color-purple-300: #c4b5fd;
    --em-color-purple-400: #a78bfa;
    --em-color-purple-500: #8b5cf6;
    --em-color-purple-600: #7c3aed;
    --em-color-purple-700: #6d28d9;
    --em-color-purple-800: #5b21b6;
    --em-color-purple-900: #4c1d95;

    /* Cyan */
    --em-color-cyan-50:  #ecfeff;
    --em-color-cyan-100: #cffafe;
    --em-color-cyan-200: #a5f3fc;
    --em-color-cyan-300: #67e8f9;
    --em-color-cyan-400: #22d3ee;
    --em-color-cyan-500: #06b6d4;
    --em-color-cyan-600: #0891b2;
    --em-color-cyan-700: #0e7490;
    --em-color-cyan-800: #155e75;
    --em-color-cyan-900: #164e63;

    /* Neutral */
    --em-color-neutral-0:   #ffffff;
    --em-color-neutral-50:  #f8fafc;
    --em-color-neutral-100: #f1f5f9;
    --em-color-neutral-200: #e2e8f0;
    --em-color-neutral-300: #cbd5e1;
    --em-color-neutral-400: #94a3b8;
    --em-color-neutral-500: #64748b;
    --em-color-neutral-600: #475569;
    --em-color-neutral-700: #334155;
    --em-color-neutral-800: #1e293b;
    --em-color-neutral-900: #0f172a;

    /* Success */
    --em-color-success-50:  #ecfdf5;
    --em-color-success-100: #d1fae5;
    --em-color-success-200: #a7f3d0;
    --em-color-success-300: #6ee7b7;
    --em-color-success-400: #34d399;
    --em-color-success-500: #10b981;
    --em-color-success-600: #059669;
    --em-color-success-700: #047857;
    --em-color-success-800: #065f46;
    --em-color-success-900: #064e3b;

    /* Warning */
    --em-color-warning-50:  #fffbeb;
    --em-color-warning-100: #fef3c7;
    --em-color-warning-200: #fde68a;
    --em-color-warning-300: #fcd34d;
    --em-color-warning-400: #fbbf24;
    --em-color-warning-500: #f59e0b;
    --em-color-warning-600: #d97706;
    --em-color-warning-700: #b45309;
    --em-color-warning-800: #92400e;
    --em-color-warning-900: #78350f;

    /* Error */
    --em-color-error-50:  #fef2f2;
    --em-color-error-100: #fee2e2;
    --em-color-error-200: #fecaca;
    --em-color-error-300: #fca5a5;
    --em-color-error-400: #f87171;
    --em-color-error-500: #ef4444;
    --em-color-error-600: #dc2626;
    --em-color-error-700: #b91c1c;
    --em-color-error-800: #991b1b;
    --em-color-error-900: #7f1d1d;

    /* Info */
    --em-color-info-50:  #ecfeff;
    --em-color-info-100: #cffafe;
    --em-color-info-200: #a5f3fc;
    --em-color-info-500: #06b6d4;
    --em-color-info-600: #0891b2;
    --em-color-info-700: #0e7490;

    /* Orange */
    --em-color-orange-50:  #fff7ed;
    --em-color-orange-100: #ffedd5;
    --em-color-orange-400: #fb923c;
    --em-color-orange-500: #f97316;
    --em-color-orange-600: #ea580c;
    --em-color-orange-700: #c2410c;

    /* === 2. 시맨틱 토큰 (Semantic) === */

    /* 브랜드 */
    --em-primary:       var(--em-color-primary-500);
    --em-primary-dark:  var(--em-color-primary-700);
    --em-primary-light: var(--em-color-primary-300);
    --em-secondary:     var(--em-color-neutral-500);
    --em-success:       var(--em-color-success-600);
    --em-warning:       var(--em-color-warning-600);
    --em-danger:        var(--em-color-error-600);
    --em-info:          var(--em-color-info-600);
    --em-error:         var(--em-color-error-600);

    /* 배경 */
    --em-bg-body:       var(--em-color-neutral-100);
    --em-bg-white:      var(--em-color-neutral-0);
    --em-bg-light:      var(--em-color-neutral-50);
    --em-bg-secondary:  var(--em-color-neutral-50);
    --em-bg-hover:      var(--em-color-neutral-100);
    --em-bg-header:     var(--em-color-primary-700);
    --em-bg-nav:        var(--em-color-neutral-200);
    --em-bg-subnav:     var(--em-color-neutral-100);

    /* 텍스트 */
    --em-text-primary:   var(--em-color-neutral-800);
    --em-text-secondary: var(--em-color-neutral-600);
    --em-text-muted:     var(--em-color-neutral-400);
    --em-text-white:     var(--em-color-neutral-0);
    --em-text-link:      var(--em-color-blue-600);

    /* 보더 */
    --em-border-color:   var(--em-color-neutral-200);
    --em-border-dark:    var(--em-color-neutral-300);
    --em-border-light:   var(--em-color-neutral-100);

    /* 그림자 */
    --em-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --em-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --em-shadow:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --em-shadow-md:  0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --em-shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --em-shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* === 3. 타이포그래피 === */
    --em-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --em-font-mono:   'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    --em-font-size-xs:   11px;
    --em-font-size-sm:   12px;
    --em-font-size-base: 13px;
    --em-font-size-md:   14px;
    --em-font-size-lg:   14px;
    --em-font-size-xl:   16px;
    --em-font-size-2xl:  18px;
    --em-font-size-3xl:  20px;
    --em-font-size-4xl:  24px;
    --em-font-size-5xl:  28px;

    --em-font-weight-normal:   400;
    --em-font-weight-medium:   500;
    --em-font-weight-semibold: 600;
    --em-font-weight-bold:     700;

    --em-line-height-tight:   1.2;
    --em-line-height-normal:  1.4;
    --em-line-height-relaxed: 1.6;

    /* === 4. 스페이싱 === */
    --em-spacing-0:    0;
    --em-spacing-xs:   4px;
    --em-spacing-sm:   8px;
    --em-spacing-md:   12px;
    --em-spacing-lg:   16px;
    --em-spacing-xl:   20px;
    --em-spacing-2xl:  24px;
    --em-spacing-3xl:  32px;
    --em-spacing-4xl:  40px;
    --em-spacing-5xl:  48px;

    /* === 5. 보더 === */
    --em-radius-none: 0;
    --em-radius-sm:   2px;
    --em-radius-base: 4px;
    --em-radius-md:   6px;
    --em-radius-lg:   8px;
    --em-radius-xl:   12px;
    --em-radius-2xl:  16px;
    --em-radius-full: 9999px;

    --em-border-width-thin:   1px;
    --em-border-width-medium: 2px;
    --em-border-width-thick:  3px;

    /* === 6. 트랜지션 === */
    --em-transition-fast:   0.1s ease;
    --em-transition-normal: 0.15s ease;
    --em-transition-slow:   0.2s ease;
    --em-transition-slower: 0.3s ease;

    --em-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --em-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --em-ease-in:     cubic-bezier(0.4, 0, 1, 1);

    /* === 7. Z-Index === */
    --em-z-dropdown:  100;
    --em-z-sticky:    200;
    --em-z-fixed:     300;
    --em-z-overlay:   400;
    --em-z-modal:     1000;
    --em-z-popover:   1100;
    --em-z-tooltip:   1200;
    --em-z-toast:     10001;
    --em-z-top:       10002;

    /* === 8. 레이아웃 === */
    --em-header-height:  50px;
    --em-nav-height:     36px;
    --em-subnav-height:  32px;
    --em-sidebar-width:  200px;
    --em-footer-height:  40px;
    --em-max-content-width: 1400px;

    /* === 9. 호환성 별칭 (Backward Compatibility) === */
    /* common.css 변수명 매핑 */
    --primary:        var(--em-primary);
    --primary-dark:   var(--em-primary-dark);
    --primary-light:  var(--em-primary-light);
    --secondary:      var(--em-secondary);
    --success:        var(--em-success);
    --warning:        var(--em-warning);
    --danger:         var(--em-danger);
    --info:           var(--em-info);

    --bg-body:        var(--em-bg-body);
    --bg-white:       var(--em-bg-white);
    --bg-light:       var(--em-bg-light);
    --bg-secondary:   var(--em-bg-secondary);
    --bg-hover:       var(--em-bg-hover);
    --bg-header:      var(--em-bg-header);
    --bg-nav:         var(--em-bg-nav);
    --bg-subnav:      var(--em-bg-subnav);

    --text-primary:   var(--em-text-primary);
    --text-secondary: var(--em-text-secondary);
    --text-muted:     var(--em-text-muted);
    --text-white:     var(--em-text-white);
    --text-link:      var(--em-text-link);

    --border-color:   var(--em-border-color);
    --border-dark:    var(--em-border-dark);

    --shadow-sm:      var(--em-shadow-sm);
    --shadow:         var(--em-shadow);
    --shadow-md:      var(--em-shadow-md);
    --shadow-lg:      var(--em-shadow-lg);

    --header-height:  var(--em-header-height);
    --nav-height:     var(--em-nav-height);
    --subnav-height:  var(--em-subnav-height);
    --sidebar-width:  var(--em-sidebar-width);

    --font-size-xs:   var(--em-font-size-xs);
    --font-size-sm:   var(--em-font-size-sm);
    --font-size-base: var(--em-font-size-base);
    --font-size-md:   var(--em-font-size-md);
    --font-size-lg:   var(--em-font-size-lg);
    --font-size-xl:   var(--em-font-size-xl);

    --spacing-xs:     var(--em-spacing-xs);
    --spacing-sm:     var(--em-spacing-sm);
    --spacing-md:     var(--em-spacing-md);
    --spacing-lg:     var(--em-spacing-lg);
    --spacing-xl:     var(--em-spacing-xl);

    /* style.css 변수명 매핑 (ACT-019 충돌 해결) */
    --primary-color:      var(--em-color-blue-600);
    --primary-hover:      var(--em-color-blue-700);
    --secondary-color:    var(--em-secondary);
    --success-color:      var(--em-color-success-500);
    --error-color:        var(--em-color-error-500);
    --warning-color:      var(--em-color-warning-500);
    --background-color:   var(--em-bg-body);
    --card-background:    var(--em-bg-white);
}

/* === 접근성: 모션 감소 지원 === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}