/* ============================================================
   Colors — 리본 ERP 디자인 표준 (DESIGN.md §2 실측 팔레트)
   변수명은 구 디자인 시스템(Claude 스타일)의 이름을 그대로 유지한다 —
   앱 JSX가 var() 로 소비 중이므로 이름을 바꾸면 전부 깨진다.
   값만 DESIGN.md 팔레트로 교체. 새 색을 만들지 않는다(§10-3).
   ============================================================ */

:root {
  /* ---- 주조색(액션) — 단일 강조 #1EA8E7 ---- */
  --color-coral: #1ea8e7;          /* (구명 유지) 주조색 — 버튼·포커스·활성 */
  --color-coral-active: #1ea8e7;   /* 눌림 변형 없음 — 표준에 press 색 미정의(§9) */
  --color-coral-disabled: #dadada; /* 비활성 버튼 배경(§7-1) */
  --color-teal: #7c3aed;           /* (구명 유지) 보조 강조 — 표준의 보라 */
  --color-amber: #e83667;          /* (구명 유지) 경고/강조 — 표준의 핑크 */

  /* ---- 표면 ---- */
  --color-canvas: #f4f6fb;         /* 페이지 배경 (html·body) */
  --color-cream-soft: #f4f6fb;     /* (구명 유지) 페이지 배경과 동일 */
  --color-cream-card: #ffffff;     /* 카드·입력칸·표 배경 */
  --color-cream-strong: #ecf7ff;   /* 선택·활성 행 배경 */

  /* ---- 어두운 면 (코드 블록 전용 — 다크 모드 아님) ---- */
  --color-dark: #16121f;           /* 거의 검정 */
  --color-dark-elevated: #31414e;  /* 짙은 남회색 */
  --color-dark-soft: #16121f;

  /* ---- 경계선 — 예외 없이 #D4DCE4 (§10-3) ---- */
  --color-hairline: #d4dce4;
  --color-hairline-soft: #eceef1;  /* 표 행 구분선 */

  /* ---- 글자 ---- */
  --color-ink: #444444;            /* 제목·표 헤더 */
  --color-body-strong: #444444;
  --color-body: #666666;           /* 본문 기본 */
  --color-muted: #888888;          /* 부가 정보 */
  --color-muted-soft: #999999;     /* 설명·보조 */

  /* ---- 색 위 글자 ---- */
  --color-on-coral: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #999999;

  /* ---- 상태 ---- */
  --color-success: #1ea8e7;        /* 긍정 = 주조색 (표준에 녹색 없음) */
  --color-warning: #e83667;        /* 경고/강조 핑크 */
  --color-error: #d32f2f;          /* 오류 빨강 */

  /* ============================================================
     시맨틱 alias — 컴포넌트는 이쪽을 소비한다
     ============================================================ */
  --primary: var(--color-coral);
  --primary-active: var(--color-coral-active);
  --primary-disabled: var(--color-coral-disabled);

  --surface-page: var(--color-canvas);
  --surface-soft: var(--color-cream-soft);
  --surface-card: var(--color-cream-card);
  --surface-card-strong: var(--color-cream-strong);
  --surface-dark: var(--color-dark);
  --surface-dark-elevated: var(--color-dark-elevated);
  --surface-dark-soft: var(--color-dark-soft);

  --border-hairline: var(--color-hairline);
  --border-hairline-soft: var(--color-hairline-soft);

  --text-heading: var(--color-ink);
  --text-strong: var(--color-body-strong);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --text-faint: var(--color-muted-soft);
  --text-on-primary: var(--color-on-coral);
  --text-on-dark: var(--color-on-dark);
  --text-on-dark-muted: var(--color-on-dark-soft);
  --text-link: var(--color-coral);

  /* 포커스 링 (주조색 15%) */
  --focus-ring: rgba(30, 168, 231, 0.15);

  /* 상태별 폼 색(§2-2) — 읽기전용/사용불가 배경 */
  --surface-readonly: #f8f8f8;
  --text-disabled: #cacaca;
}