/* ==========================================================================
   tokens.css — 디자인 토큰 (개발계획 §5-5 · 명세 8-0)
   주조 블랙 / 포인트 보라 #7C3AED / 상태색 그린·앰버·레드
   Pretendard · 8pt 그리드 · 카드 라운드 12px
   다크모드는 변수 체계만 선설계(§5-7 — 구현 후순위)
   ========================================================================== */
:root {
  /* --- 주조/포인트 (명세 8-0 실측) --- */
  --cf-black: #0A0A0A;          /* 주조 블랙 (블루→블랙 변경 반영) */
  --cf-black-2: #111111;        /* 다크 사이드바 보조 */
  --cf-purple: #7C3AED;         /* 포인트 1색 (벤치마크 버튼 톤 실측) */
  --cf-purple-hover: #6D28D9;
  --cf-purple-soft: #F3EEFD;    /* 보라 연배경 (칩/active) */

  /* --- 상태색 (명세 8-0) --- */
  --cf-green: #22C55E;          /* 성공 */
  --cf-amber: #F59E0B;          /* 경고 */
  --cf-red:   #EF4444;          /* 오류 */
  --cf-green-soft: #ECFDF3;
  --cf-amber-soft: #FFF7E6;
  --cf-red-soft:   #FEF2F2;

  /* --- 3색 필드 규칙 (명세 2-4 / §5-3) --- */
  --cf-field-required: #F97316;     /* 주황 ● 필수 */
  --cf-field-computed-bg: #EFF6FF;  /* 연파랑 자동계산 배경 */
  --cf-field-computed-bd: #BFDBFE;
  --cf-field-computed-fg: #1D4ED8;

  /* --- 뉴트럴 --- */
  --cf-bg: #F8F9FB;             /* 본문 라이트 배경 (§5-7 다크 사이드바+라이트 콘텐츠) */
  --cf-surface: #FFFFFF;
  --cf-border: #E5E7EB;
  --cf-text: #1F2430;
  --cf-text-2: #6B7280;
  --cf-text-3: #9CA3AF;
  --cf-text-on-dark: #E5E7EB;
  --cf-text-on-dark-2: #9CA3AF;

  /* --- 8pt 스페이싱 스케일 (명세 8-0 "8pt 그리드") --- */
  --sp-05: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;

  /* --- 라운드/그림자 --- */
  --cf-radius-card: 12px;       /* 명세 8-0 카드 라운드 12px */
  --cf-radius-input: 8px;
  --cf-radius-chip: 999px;
  --cf-shadow-card: 0 1px 3px rgba(10, 10, 10, .06), 0 1px 2px rgba(10, 10, 10, .04);
  --cf-shadow-hover: 0 6px 16px rgba(10, 10, 10, .10);
  --cf-shadow-modal: 0 20px 50px rgba(10, 10, 10, .25);

  /* --- 타이포 (명세 8-0: Pretendard) --- */
  --cf-font: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", sans-serif;
  --cf-font-num: var(--cf-font);

  /* --- 레이아웃 치수 (명세 8-1 / §5-6) --- */
  --cf-sidebar-w: 240px;        /* 셀러 다크 사이드바 */
  --cf-context-w: 300px;        /* 우측 컨텍스트 패널 */
  --cf-admin-sidebar-w: 220px;  /* 관리자 사이드바 (§5-6) */
  --cf-tabbar-h: 60px;          /* 모바일 하단 탭바 */
  --cf-touch-min: 44px;         /* 터치 타깃 최소 (명세 8-11) */

  /* --- 마인드맵 노드 색 (명세 8-0 실측 — 변경 금지, 참조용 토큰) --- */
  --cf-node-hook: #EF4444;
  --cf-node-flow: #3B82F6;
  --cf-node-cta: #22C55E;
  --cf-node-plan: #EAB308;
}

/* 다크모드 변수 자리 (명세 12장 후순위 — 값만 예약) */
[data-cf-theme="dark"] {
  --cf-bg: #0F1115;
  --cf-surface: #171A21;
  --cf-border: #262B36;
  --cf-text: #E5E7EB;
  --cf-text-2: #9CA3AF;
}

/* --- 공통 베이스 --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--cf-font);
  color: var(--cf-text);
  background: var(--cf-bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* 9:16 프리뷰 일관성 (§5-7 · 명세 8-11) */
.cf-ratio-916 { aspect-ratio: 9 / 16; width: 100%; background: #000; border-radius: var(--cf-radius-card); overflow: hidden; }