/* =========================================================================
   cape-ui-tokens.css — CAPE 전사 디자인 토큰 (프레임워크 중립 SSOT)
   원칙: "중립 크롬 + 데이터에만 채도" (neutral chrome, saturated data)
   출처: 주간실적 대시보드 DNA 추출 + 2026 대시보드 베스트프랙티스 소폭 반영
   관리: CAPE-Alfred / memory/design-conventions.md (원본). 이 파일은 그 토큰의 배포본.
   사용법: 각 앱이 이 파일을 static에 복사해 <link>. 프로젝트는 --accent 한 개만 오버라이드.
   ========================================================================= */
:root {
  /* --- 중립 크롬 (모든 프로젝트 공유 = 통일성) --- */
  --bg:          #f1f5f9;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e2e8f0;
  --border-2:    #cbd5e1;
  --ink:         #1e293b;
  --ink-strong:  #0f172a;
  --muted:       #64748b;
  --faint:       #94a3b8;

  /* --- 강조색 (프로젝트별 렌즈 = 개성). 기본 = 실적 블루 ---
     프로젝트는 자기 static에서 이 세 값만 재정의하면 개성 완성:
       :root { --accent:#0d9488; --accent-ink:#0f766e; --accent-soft:#f0fdfa; }  (예: 재고=청록)
     쿠팡은 자기 색을 정하되(예: 쿠팡 계열), 나머지 토큰은 건드리지 않는다. */
  --accent:      #2563eb;
  --accent-ink:  #1e40af;
  --accent-soft: #eff6ff;

  /* --- 의미색 (상태 = 어디서나 같은 뜻) --- */
  --pos:  #16a34a;  --pos-soft:  #f0fdf4;  --pos-border:  #86efac;
  --neg:  #dc2626;  --neg-soft:  #fef2f2;  --neg-border:  #fca5a5;
  --warn: #d97706;  --warn-soft: #fffbeb;  --warn-border: #fcd34d;
  --info: #2563eb;  --info-soft: #eff6ff;  --info-border: #bfdbfe;

  /* --- 데이터 팔레트 (차트·히트맵 전용. Chart.js series 색으로 이 토큰을 읽어라) --- */
  --data-sales: #2563eb;  /* 결제금액 계열 */
  --data-ad:    #f59e0b;  /* 광고비 계열 */
  --data-roas:  #dc2626;  /* ROAS/비율 라인 */
  /* 발산 히트맵: 음수→--neg, 0=흰색, 양수→--pos / 순차 히트맵: 흰색→계열색 */

  /* --- 타이포 (Pretendard, 기본 14px, 숫자는 tabular-nums) --- */
  --font: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;

  /* --- 간격 · 모서리 · 그림자 · 포커스 --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 14px rgba(15,23,42,.07);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* 권장 기본값 (앱이 원하면 계승) */
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; }
table { font-variant-numeric: tabular-nums; }        /* 숫자 정렬 */
:focus-visible { outline: none; box-shadow: var(--ring); }  /* 접근성 포커스 링 */

/* 컴포넌트 스타일(카드·버튼·테이블 등)은 스타일 타일 v1을 시각 스펙으로 삼아
   각 앱이 토큰에서 조립한다. 재사용될 컴포넌트(모달·이미지 카드뷰 등)는
   "두 번째로 만드는 순간" 공유로 승격(ALFRED에 알림). — design-conventions.md */