/* =========================================================================
 * PropX 디자인 토큰 (CmWorld3D CLAUDE.md 규칙 준수)
 * - 강조색: 진홍색(Crimson) 단일
 * - 바탕: 흰색 기반
 * - 일반 UI: 무채색만 사용
 * 색상값 직접 사용 금지 - 모든 색은 var(--color-*) 로 참조
 * ========================================================================= */

:root {
    /* === 강조색 (Crimson 단일) === */
    --color-accent:           #DC143C;
    --color-accent-strong:    #B01030;
    --color-accent-soft:      #F8D7DC;
    --color-accent-bg:        #FCEBEE;

    /* === 무채색 - 배경/표면 === */
    --color-bg:               #FFFFFF;
    --color-surface:          #FFFFFF;
    --color-surface-alt:      #F7F7F8;
    --color-surface-hover:    #F0F0F2;
    --color-surface-active:   #E6E6E9;

    /* === 무채색 - 텍스트 === */
    --color-text:             #1A1A1A;
    --color-text-secondary:   #4A4A4A;
    --color-text-muted:       #8A8A8A;
    --color-text-on-accent:   #FFFFFF;

    /* === 경계 / 구분 === */
    --color-border:           #E2E2E5;
    --color-border-strong:    #C8C8CC;
    --color-divider:          #ECECEE;

    /* === 상태 (회색조 기반, 강조는 accent) === */
    --color-success:          #5A8A5A;
    --color-warning:          #B97A2C;
    --color-danger:           var(--color-accent);
    --color-info:             #4A6A88;

    /* === 그림자 === */
    --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:              0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-dialog:          0 24px 64px rgba(0, 0, 0, 0.18);

    /* === 간격 === */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* === 라운드 === */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;

    /* === 폰트 === */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard",
                   "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --font-mono:   "SFMono-Regular", Consolas, "Courier New", monospace;
    --font-size-xs:  12px;
    --font-size-sm:  13px;
    --font-size-md:  14px;
    --font-size-lg:  16px;
    --font-size-xl:  20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    /* === 레이아웃 === */
    --header-height:  56px;
    --sidebar-width:  240px;
    --content-max:    1280px;

    /* === 트랜지션 === */
    --transition-fast: 120ms ease;
    --transition-md:   200ms ease;

    /* === 데이터 시각화(차트) 전용 팔레트 — 사용량 대시보드 (dataviz 검증 팔레트) ===
     * 구 대시보드(claudeUsages/dashboard.html)의 검증된 팔레트를 그대로 토큰화한 것.
     * 이 팔레트는 CLAUDE.md "일반 UI 는 무채색만" 규칙의 예외로, 데이터 시각화
     * 목적(모델/블록 구분, 히트맵 강도 표현)에 한정해 여러 색을 허용한다.
     * 색상 리터럴은 이 토큰들에만 존재해야 하며, 다른 CSS/JS/HTML 에서는
     * var(--color-chart-*) 로만 참조한다. */
    --color-chart-1: #6366F1;   /* 인디고 — 주 시리즈 */
    --color-chart-2: #14B8A6;   /* 틸 — 진행 중/보조 */
    --color-chart-3: #F59E0B;   /* 앰버 — 경고/3순위 */
    --color-chart-4: #EC4899;   /* 핑크 */
    --color-chart-5: #8B5CF6;   /* 바이올렛 */
    /* 6~10 — 다중 라인 그래프(부서별/구성원별) 확장 카테고리. 라인 수가 팔레트보다
     * 많으면 색이 반복되므로, 서로 뚜렷이 구분되는 색으로 10색까지 확보한다. */
    --color-chart-6: #0EA5E9;   /* 스카이 블루 */
    --color-chart-7: #22C55E;   /* 그린 */
    --color-chart-8: #EF4444;   /* 레드 */
    --color-chart-9: #92400E;   /* 브라운 */
    --color-chart-10: #64748B;  /* 슬레이트 */
    --color-chart-other: #94A3B8;
    --color-chart-ramp-1: #9AA8FB;  /* 히트맵 4단계 */
    --color-chart-ramp-2: #7285F5;
    --color-chart-ramp-3: #5459EA;
    --color-chart-ramp-4: #3F35C8;
    --color-chart-zero: #EEF0F5;    /* 히트맵 빈 셀(0값) 배경 — track 과 색이 달라 별도 유지 */
    --color-chart-area: rgba(99, 102, 241, 0.12);  /* 면 채움 (chart-1 의 12%) */

    /* === 사용량 대시보드 중립색 — 참조 dashboard.html :root 값을 그대로 토큰화 ===
     * PropX 순수 회색 무채색 토큰(--color-surface-alt/--color-text/--color-text-muted/
     * --color-border 등)과는 별개다. 참조는 살짝 푸른 기운이 도는 청회색(cool gray)
     * 계열이라 순수 회색과 색조가 다르며, 사용량(/usage) 페이지의 콘텐츠 영역
     * (.wrap 이하)에만 적용한다 — 공용 헤더(cm-header)는 기존 PropX 토큰을 유지한다. */
    --color-chart-bg:    #F6F7FB;   /* 페이지 배경 */
    --color-chart-ink:   #1F2430;   /* 본문 텍스트 */
    --color-chart-muted: #7B8194;   /* 보조 텍스트 · 축 라벨 */
    --color-chart-line:  #E4E7EF;   /* 보더 · 구분선 */
    --color-chart-track: #EEF0F7;   /* 게이지 트랙 · 토글/코드 배경 — zero(#EEF0F5)와 다른 값이니 혼동 주의 */

    /* 사용량 대시보드 카드 그림자 — 참조 dashboard.html 의 2단 그림자를 그대로 토큰화
     * (기존 --shadow-sm 은 더 평평해 시각 충실도가 떨어짐, 리뷰 반영) */
    --shadow-card: 0 1px 3px rgba(30, 40, 80, 0.08), 0 4px 14px rgba(30, 40, 80, 0.05);
    /* 사용량 대시보드 토글 활성 버튼 그림자 — 참조 dashboard.html 의 .toggle button.on 값
     * (기존 --shadow-sm 은 순수 검정 rgba(0,0,0,.04) 라 청회색 톤이 아님, Task 13 잔여 교정) */
    --shadow-toggle: 0 1px 2px rgba(30, 40, 80, 0.15);
}