@import "tailwindcss";

/* 색 토큰 — 숫자 스케일(팀 관례) + dataviz 차트 크롬. 시리즈 색은 엔터티 고정:
   네이버 #008a43(CVD 검증 통과 톤다운) · 쿠팡 #f0455b · 최종 #4f46e5. */
@theme {
  --color-page: #f7f7f5;
  --color-surface: #fcfcfb;
  --color-surface-2: #f4f4f1;
  --color-line-200: #e6e5df;
  --color-line-100: #efeee9;
  --color-grid: #e1e0d9;

  --color-ink-900: #171a20;
  --color-ink-700: #3d434f;
  /* ink-500/400: 소형(11~13px) 캡션·라벨에 쓰이므로 WCAG AA 4.5:1 이상 필수
     (기존 ink-400 #9aa1ac 은 2.54:1 로 미달 — 위계는 크기·굵기가 담당) */
  --color-ink-500: #5d6470;
  --color-ink-400: #6d7480;

  --color-primary-700: #4338ca;
  --color-primary-600: #4f46e5;
  --color-primary-400: #8b7bff;
  --color-primary-100: #e5e4fb;
  --color-primary-50: #eef0ff;

  /* 상태(큐·알림) — status 팔레트, 시리즈로 재사용 금지 */
  --color-ok-600: #0f9d58;
  --color-ok-50: #e7f6ee;
  --color-warn-700: #a36a00;
  --color-warn-600: #c77800;
  --color-warn-50: #fdf3e3;
  --color-run-600: #2563eb;
  --color-run-50: #e8f0ff;
  --color-dead-600: #d03b3b;
  --color-dead-50: #fdeaea;

  /* 중립 계열(차트 보조 — 유휴/종료 등 '무해한 상태') */
  --color-neutral-400: #898781;
  --color-neutral-300: #c3c2b7;

  /* 차트 시리즈(엔터티 고정) */
  --color-naver: #008a43;
  --color-coupang: #f0455b;
  --color-final: #4f46e5;
  --color-cost-ai: #2a78d6;
  --color-cost-proxy: #eda100;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* 앱을 뷰포트에 고정 — 페이지(body) 스크롤 없음. 스크롤은 content(main) 영역에서만. */
html, body, #root {
  height: 100%;
}

body {
  @apply bg-page text-ink-900 font-sans text-[14px] antialiased;
}

/* Tailwind v4 는 버튼 기본 커서를 default 로 바꿈 — 활성 버튼은 pointer 로 복구. */
button:not(:disabled) {
  cursor: pointer;
}

/* 테이블 숫자 열 정렬 */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* recharts 기본 폰트 */
.recharts-wrapper,
.recharts-tooltip-wrapper {
  font-size: 12px;
}