/**
 * ConvoFin 디자인 토큰 — 단일 출처
 *
 * 현재 페이지들에 인라인으로 흩어져 있는 색상·간격·그림자 값을 여기로 모은다.
 * 색 하나를 바꿀 때 20개 파일을 고치던 문제를 해결하기 위한 파일이므로,
 * 새 페이지는 반드시 var(--cf-*)만 쓰고 하드코딩하지 않는다.
 *
 * ⚠️ 현행 디자인(쿨 실버 + 인디고)을 그대로 옮겨 담은 것이며 값 변경은 없다.
 *    글자 크기(--fs-*)는 header.js가 주입하는 기존 시스템을 그대로 사용한다.
 */
:root {
  /* ── 브랜드 ── */
  --cf-accent: #5b6ef5;
  --cf-accent-strong: #4f46e5;
  --cf-accent-deep: #4c1d95;
  --cf-accent-soft: #c4b5fd;
  --cf-accent-pale: #ede9fe;
  --cf-accent-bg: #f5f3ff;
  --cf-cyan: #0bbcd4;

  /* ── 텍스트 ── */
  --cf-text-1: #0f172a; /* 제목 */
  --cf-text-2: #334155; /* 본문 */
  --cf-text-3: #6b7280; /* 보조 */
  --cf-text-4: #9ca3af; /* 흐린 */

  /* ── 배경·경계 ── */
  --cf-bg: #f8fafc;
  --cf-bg-2: #f1f5f9;
  --cf-bg-3: #f3f4f6;
  --cf-surface: #ffffff;
  --cf-border: #e5e7eb;
  --cf-border-2: #e2e8f0;
  --cf-bg-grad: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);

  /* ── 시맨틱 (위험 표시 — 의미가 기능이므로 임의 변경 금지) ── */
  --cf-danger: #ef4444;
  --cf-danger-deep: #b91c1c;
  --cf-danger-bg: #fef2f2;
  --cf-warn: #f59e0b;
  --cf-warn-bg: #fef3c7;
  --cf-success: #10b981;
  --cf-success-bg: #f0fdf4;

  /* ── 버튼·카드 ── */
  --cf-btn-grad: linear-gradient(135deg, #5b6ef5, #0bbcd4);
  --cf-btn-shadow: 0 8px 24px rgba(91, 110, 245, 0.2);
  --cf-card-bg: rgba(255, 255, 255, 0.65);
  --cf-card-border: rgba(255, 255, 255, 0.8);
  --cf-card-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  --cf-card-shadow-hover: 0 12px 36px rgba(15, 23, 42, 0.08);

  /* ── 레이아웃 (3단 규격) ── */
  --cf-sidebar-w: 350px;
  --cf-pane-w: 400px;
  --cf-header-h: 70px;
  --cf-header-h-mobile: 56px;

  /* ── 반경·간격 ── */
  --cf-radius-sm: 8px;
  --cf-radius: 12px;
  --cf-radius-lg: 20px;
  --cf-radius-pill: 999px;
  --cf-gap-sm: 8px;
  --cf-gap: 16px;
  --cf-gap-lg: 24px;

  /* ── 폰트 ── */
  --cf-font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cf-font-display: 'Plus Jakarta Sans', 'Pretendard', -apple-system, sans-serif;
  --cf-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}