/* CSI Enterprise Design System - implementation tokens
 * source of truth : 전사_디자인_시스템_R2.1.pptx (BATCH A)
 * generated by    : artifacts/design-system-r2/_work/gen_tokens.py
 * DO NOT hand-edit: change the deck, then regenerate.
 * Every value is traceable to a slide via design-tokens.json .src
 */

:root {
  /* ---- color.core ---- */
  --bg-0: #FFFFFF;  /* page 바닥 (s05) */
  --bg-1: #F6F8FC;  /* 섹션 구분 (s05) */
  --bg-2: #EEF3FA;  /* 깊은 구분 (s05) */
  --ink: #0B1B33;  /* 반전 블록 배경 (s05) */
  --ink-900: #08152B;  /* 가장 진한 네이비 (s05) */
  --cyan: #0C6C90;  /* 단일 강조색 (s05) */
  --cyan-bright: #22D3EE;  /* 다크 위 시안 (s05) */
  --violet: #6D28D9;  /* 보조 액센트(1회 이하) (s05) */
  --fg: #0B1B33;  /* 본문 진한 글씨 (s05) */
  --fg-2: #33415C;  /* 보조 본문 (s05) */
  --fg-3: #4D5C78;  /* 캡션/각주 (s05) */
  --fg-4: #5F6D86;  /* 메타 라벨 (s04) */
  --table-header-bg: #EEF2F8;  /* 표 헤더 배경 (s04) */

  /* ---- color.status ---- */
  --status-pass: #047857;  /* PASS / 성공 (s05) */
  --status-warning: #B45309;  /* WARNING / 주의 (s05) */
  --status-wait: #4D5C78;  /* WAIT / 대기 (s05) */
  --status-blocked: #9B2C2C;  /* BLOCKED / 차단 (s05) */

  /* ---- color.brand.csi ---- */
  --csi-surface: #FFFFFF;  /* 면 (s05) */
  --csi-surface-2: #F4F7FD;  /* 면 2 / section (s05,s20) */
  --csi-ink: #0B1B33;  /* ink block (s05,s20) */
  --csi-accent: #0C6C90;  /* cyan accent (s05,s20) */

  /* ---- color.brand.pmh ---- */
  --pmh-surface: #FAF8F5;  /* warm ivory page (s05,s20) */
  --pmh-surface-2: #F2EEE8;  /* 면 2 (s05) */
  --pmh-ink: #0D1A2D;  /* body navy (s05,s20) */
  --pmh-accent: #C0B490;  /* tan accent (s05,s20) */

  /* ---- color.brand.npd ---- */
  --npd-surface: #FFFFFF;  /* 면 (s05) */
  --npd-surface-2: #F3F1EE;  /* warm surface (s05,s20) */
  --npd-ink: #173B57;  /* clinical navy body (s05,s20) */
  --npd-accent: #2A9D9A;  /* calm teal CTA (s05,s20) */

  /* ---- color.brand.npd.current_measured ---- */
  --npd-legacy-blue: #0084FC;  /* 개선 대상(현재 사이트 실측) (s05,s16) */
  --npd-legacy-blue-2: #0054F0;  /* 개선 대상(현재 사이트 실측) (s05,s16) */
  --npd-legacy-yellow: #FCE400;  /* 개선 대상(현재 사이트 실측) (s05,s16) */

  /* ---- font ---- */
  --font-sans: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;  /* 기본 한글 스택 (s04,s20) */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;  /* 모노 (s04,s20) */
  --fw-regular: 400;  /* 본문 (s04) */
  --fw-medium: 500;  /* 라벨·보조 (s04) */
  --fw-semibold: 600;  /* 캡션·버튼 (s04) */
  --fw-bold: 700;  /* 소제목 (s04) */
  --fw-extrabold: 800;  /* 대제목·KPI (s04) */

  /* ---- type.web ---- */
  --web-h1-min: 48px;  /* WEB H1 하한 (s04) */
  --web-h1-max: 64px;  /* WEB H1 상한 (s04) */
  --web-h2-min: 34px;  /* WEB H2 하한 (s04) */
  --web-h2-max: 42px;  /* WEB H2 상한 (s04) */
  --web-h3-min: 22px;  /* WEB H3 하한 (s04) */
  --web-h3-max: 28px;  /* WEB H3 상한 (s04) */
  --web-body-min: 16px;  /* 본문 하한(데스크톱 최소) (s04) */
  --web-body-max: 18px;  /* 본문 상한 (s04) */
  --web-caption-min: 12px;  /* 캡션 하한 (s04) */
  --web-caption-max: 14px;  /* 캡션 상한 (s04) */
  --web-button-min: 14px;  /* 버튼 하한 (s04) */
  --web-button-max: 16px;  /* 버튼 상한 (s04) */
  --web-table-header-min: 12px;  /* 표 헤더 하한 (s04) */
  --web-table-header-max: 13px;  /* 표 헤더 상한 (s04) */
  --kpi-number-min: 32px;  /* KPI 숫자 하한 (s04) */
  --kpi-number-max: 48px;  /* KPI 숫자 상한 (s04) */
  --kpi-unit: 14px;  /* KPI 단위 보조 (s04) */
  --line-height-body-min: 1.65;  /* 본문 행간 하한 (s04,s20) */
  --line-height-body-max: 1.8;  /* 본문 행간 상한 (s04,s20) */
  --measure-min-ch: 45;  /* 본문 폭 최소 글자수 (s20) */
  --measure-max-ch: 75;  /* 본문 폭 최대 글자수 (s20) */

  /* ---- type.ppt ---- */
  --ppt-title-min: 28pt;  /* PPT 제목 하한 (s04,s18) */
  --ppt-title-max: 34pt;  /* PPT 제목 상한 (s04,s18) */
  --ppt-body-min: 15pt;  /* PPT 본문 하한 (s04,s18) */
  --ppt-body-max: 20pt;  /* PPT 본문 상한 (s04,s18) */
  --ppt-foot-min: 10pt;  /* PPT 각주 최소(미만 금지) (s04,s18) */
  --ppt-line-height-title: 1.15;  /* PPT 제목 행간 (s18) */

  /* ---- type.a4 ---- */
  --a4-title-min: 24pt;  /* A4 제목 하한 (s18,s20) */
  --a4-title-max: 30pt;  /* A4 제목 상한 (s18,s20) */
  --a4-section-min: 16pt;  /* A4 섹션 하한 (s18) */
  --a4-section-max: 20pt;  /* A4 섹션 상한 (s18) */
  --a4-body-min: 10.5pt;  /* A4 본문 하한 (s04,s18) */
  --a4-body-max: 12pt;  /* A4 본문 상한 (s04,s18) */

  /* ---- space ---- */
  --space-1: 8px;  /* 8px base (s06,s20) */
  --space-2: 16px;  /* s06,s20 */
  --space-3: 24px;  /* s06,s20 */
  --space-4: 32px;  /* s06,s20 */
  --space-5: 48px;  /* s06,s20 */
  --space-6: 64px;  /* s06,s20 */
  --space-7: 96px;  /* s06,s20 */
  --space-8: 128px;  /* s06,s20 */
  --section-pad-desktop-min: 96px;  /* 데스크톱 섹션 패딩 하한 (s06,s20) */
  --section-pad-desktop-max: 144px;  /* 데스크톱 섹션 패딩 상한 (s06,s20) */
  --section-pad-mobile-min: 64px;  /* 모바일 섹션 패딩 하한 (s06,s20) */
  --section-pad-mobile-max: 88px;  /* 모바일 섹션 패딩 상한 (s06,s20) */

  /* ---- radius ---- */
  --r-xs: 4px;  /* 배지 하한 (s06) */
  --r-sm: 6px;  /* 배지 상한 (s06) */
  --r-md: 10px;  /* 카드 하한 (s06) */
  --r-lg: 14px;  /* 카드 상한 / 컨테이너 하한 (s06) */
  --r-xl: 22px;  /* 큰 컨테이너 (s06) */
  --r-pill: 99px;  /* pill 배지 (s06) */

  /* ---- border ---- */
  --line: rgba(11,27,51,0.10);  /* 기본 구분선 (csi-tokens) */
  --line-2: rgba(11,27,51,0.16);  /* 강한 구분선 (csi-tokens) */
  --line-3: rgba(11,27,51,0.26);  /* 가장 강한 구분선 (csi-tokens) */
  --border-accent-w: 4px;  /* 강조행 좌측 액센트 (s08) */
  --table-divider: #0C6C90;  /* 표 구분선 (s08) */

  /* ---- shadow ---- */
  --shadow-sm: 0 1px 2px rgba(11,27,51,.05);  /* 약한 깊이 (s20) */
  --shadow: 0 10px 26px -12px rgba(11,27,51,.18);  /* 카드 깊이 (s20) */

  /* ---- grid ---- */
  --max-width: 1280px;  /* 데스크톱 최대 폭 (s06,s20) */
  --grid-cols-desktop: 12;  /* 데스크톱 컬럼 (s06,s20) */
  --grid-cols-mobile: 4;  /* 모바일 컬럼 (s06,s20) */
  --gutter-desktop: 24px;  /* 데스크톱 거터 (s06,s20) */
  --gutter-mobile: 16px;  /* 모바일 거터 (s06,s20) */
  --dashboard-base: 1440px;  /* 대시보드 기준 폭 (s06) */

  /* ---- breakpoint ---- */
  --bp-mobile: 390px;  /* 모바일 기준 폭 (s06,s20) */
  --bp-tablet: 768px;  /* 태블릿 분기 (derived) */
  --bp-desktop: 1280px;  /* 데스크톱 분기 (s06,s20) */

  /* ---- canvas ---- */
  --canvas-web: 1920x1080;  /* 슬라이드/웹 캔버스 16:9 (s20) */
  --canvas-mobile: 390x844;  /* 모바일 목업 (s20) */
  --canvas-ppt: 1280x720pt;  /* PPT 16:9 export (s20) */
  --canvas-a4: 595x842pt;  /* A4 1page (s20) */

  /* ---- component ---- */
  --touch-min: 44px;  /* 터치 영역 최소(44x44) (s04,s06) */
  --card-radius: 14px;  /* 카드 기본 radius (s06) */
  --card-pad: 24px;  /* 카드 내부 패딩 (s06) */
  --kpi-card-min-h: 92px;  /* KPI 카드 최소 높이(R2.1 실측) (s08) */
  --kpi-label-size: 12px;  /* KPI 라벨 (s08) */
  --badge-radius: 6px;  /* 상태 배지 radius (s06) */
  --badge-pad-x: 8px;  /* 상태 배지 좌우 패딩 (derived) */
  --badge-pad-y: 4px;  /* 상태 배지 상하 패딩 (derived) */
  --cta-height: 44px;  /* CTA 최소 높이 (s04) */
  --chart-accent: #0C6C90;  /* 차트 강조색 (s08) */
  --chart-compare: #22D3EE;  /* 차트 비교색 (s08) */
  --chart-max-colors: 2;  /* 차트 색 상한 (s08) */

}

/* status utility: colour is never the only signal - pair with icon + text */
.is-pass    { color: var(--status-pass); }
.is-warning { color: var(--status-warning); }
.is-wait    { color: var(--status-wait); }
.is-blocked { color: var(--status-blocked); }

@media (max-width: 768px) {
  :root { --gutter-desktop: var(--gutter-mobile); }
}
