/* ============================================================
   Design Tokens — Control Tower v2 (매거진 스타일)
   크림 지면 + 잉크 텍스트 + 세리프 헤드라인 + 모노 캡션.
   색 / 폰트 / radius / 그림자 / 레이아웃 값은 이 파일의 CSS 변수로
   정의하고, base.css는 var(--*)를 참조합니다.
   ============================================================ */

:root {
  /* ---------- Accent (디자인 기본값 #0e7490 · 교체 지점) ---------- */
  --ac: #0e7490;

  /* ---------- 지면 / 잉크 ---------- */
  --ink-rgb: 24, 26, 28;           /* 헤어라인·잉크 알파의 공통 원색 */
  --color-bg: #f7f5f0;             /* 크림 지면 */
  --color-surface: #ffffff;        /* 카드/액자 표면 */
  --color-ink: #16181b;            /* 본문 잉크 */
  --color-cream: #f7f5f0;          /* 잉크 위 텍스트 */
  --color-text-body: #2c313a;      /* 상세 본문 */
  --color-text-secondary: #4e5560; /* 보조 텍스트 */
  --color-text-muted: #878e99;     /* 캡션/라벨 */
  --color-text-faint: #b3b9c2;     /* 인덱스 번호 */
  --color-shot-bg: #eceae4;        /* 스크린샷 슬롯 배경 */

  /* ---------- 상태 점 ---------- */
  --status-running: #0a9d6c;
  --status-starting: #d97706;
  --status-stopped: #a8b0ba;
  --status-crashed: #dc2626;
  --status-external: #2563eb;

  /* ---------- 타입 배지 ---------- */
  --type-web: #1d4ed8;
  --type-batch: #7c3aed;
  --type-external: #b45309;
  --type-desktop: #0f766e;
  --type-material: #4d7c0f;
  --type-default: #64748b;

  /* ---------- Claude Code 버튼 ---------- */
  --claude-rgb: 217, 119, 87;
  --claude-text: #b05730;

  /* ---------- 준비사항 박스 ---------- */
  --setup-bg: #fdf6e3;
  --setup-border: #eadfb8;
  --setup-title: #8a6d1a;
  --setup-text: #7a6420;
  --setup-icon: #c9ab52;

  /* ---------- 로그 터미널 ---------- */
  --log-bg: #0f1720;
  --log-bar-bg: #121c27;
  --log-bar-line: rgba(140, 165, 200, 0.12);
  --log-text: #b9c8da;
  --log-dot: #39424f;
  --log-path: #5e6d80;
  --log-live: #34d399;

  /* ---------- 토스트 ---------- */
  --toast-bg: #16181b;
  --toast-text: #f7f5f0;

  /* ---------- Typography ---------- */
  --font-serif: "Noto Serif KR", "Apple SD Gothic Neo", "Noto Serif CJK KR",
    Georgia, serif;
  --font-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 7px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 11px;
  --radius-4xl: 12px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-cover: 0 24px 60px rgba(var(--ink-rgb), 0.12);
  --shadow-card-hover: 0 14px 34px rgba(var(--ink-rgb), 0.12);
  --shadow-terminal: 0 16px 44px rgba(var(--ink-rgb), 0.18);
  --shadow-toast: 0 12px 34px rgba(var(--ink-rgb), 0.35);

  /* ---------- Layout / 크기 ---------- */
  --layout-present-max: 1280px;
  --layout-admin-max: 1320px;
  --layout-detail-max: 960px;
  --card-min-width: 330px;
  --feature-min-width: 360px;
  --log-viewer-height: 320px;

  /* ---------- Motion / Focus / Z ---------- */
  --transition-base: all 0.15s ease;
  --focus-ring: 2px solid var(--ac);
  --focus-ring-offset: 2px;
  --z-header: 20;
  --z-toast: 100;
}