/* ═══════════════════════════════════════════════════════════════════════════
   quooto tokens v1 — 단일 진실원 (docs/design-charter-2026-07.md §2)
   "이 값 외 사용 금지." 새 부품·새 화면은 이 파일의 토큰만 쓴다.
   충돌 회피: 구세대 변수(--bg·--line·--ink·--card 등)는 여기서 건드리지 않는다 —
   구화면은 R3 이관·R7 소탕에서 갈아탄다(헌장 §7). 그때 이 파일이 그 이름들을 이어받는다.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 타이포 (7단 — 이 외 크기 금지) ── */
  --fs-tiny: 11px;  --lh-tiny: 16px;   /* 라벨·뱃지 */
  --fs-cap: 12px;   --lh-cap: 18px;    /* 캡션·보조 */
  --fs-body: 13px;  --lh-body: 20px;   /* ★ 그리드 행 기본 */
  --fs-md: 14px;    --lh-md: 22px;     /* 폼·본문 */
  --fs-lg: 16px;    --lh-lg: 24px;     /* 섹션 제목 */
  --fs-xl: 20px;    --lh-xl: 28px;     /* 패널 제목 */
  --fs-title: 24px; --lh-title: 32px;  /* 페이지 제목 */

  /* ── 중립 (그린 언더톤 한 축) ── */
  --surface: #ffffff;
  --surface-2: #f2f4f2;
  --line-2: #ccd2cc;
  --ink-2: #5a635c;
  --ink-3: #8b948d;

  /* ── 액센트 (그린 3단 — 유일한 브랜드색) ── */
  --accent: #12945f;
  --accent-strong: #0d7a4e;
  --accent-soft: #e4f3ec;

  /* ── 시맨틱 상태쌍 (뱃지 전용 — 장식 사용 금지) ── */
  --st-draft-bg: #eef1ee;  --st-draft-fg: #5b655c;
  --st-issued-bg: #e3edfd; --st-issued-fg: #1d5bd6;
  --st-won-bg: #e1f4e8;    --st-won-fg: #0f8a4d;
  --st-hold-bg: #fdf0dc;   --st-hold-fg: #9a6b12;
  --st-cancel-bg: #fde8e8; --st-cancel-fg: #c02626;
  --st-neutral-bg: #ece9f6; --st-neutral-fg: #5f4fa8;  /* 외부·기타 구분용 1쌍 */
  --neg: #c02626;  /* 음수 금액 (한국 장부 관례) */

  /* ── 면·선·그림자 (보더가 기본, 그림자는 2개뿐) ── */
  --sh-pop: 0 4px 16px rgba(0, 0, 0, .08);     /* 팝오버·드롭다운·메뉴 전용 */
  --sh-modal: 0 12px 32px rgba(0, 0, 0, .16);  /* 드로어·다이얼로그 전용 */
  --r-ctl: 6px;    /* 버튼·인풋·셀렉트·칩 */
  --r-box: 10px;   /* 카드·패널·드로어 */
  --r-pill: 999px; /* 상태 뱃지 전용 */

  /* ── 간격 (8단계 외 금지) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
}

/* 다크 — 토큰 쌍으로만. 화면별 다크 오버라이드 금지 */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #171b18;
    --surface-2: #212623;
    --line-2: #3d453f;
    --ink-2: #a7b0a9;
    --ink-3: #79837b;
    --accent-soft: #143526;
    --st-draft-bg: #333a35;  --st-draft-fg: #aeb7af;
    --st-issued-bg: #1d3a66; --st-issued-fg: #8ab4ff;
    --st-won-bg: #14402a;    --st-won-fg: #63d597;
    --st-hold-bg: #43350f;   --st-hold-fg: #f0c375;
    --st-cancel-bg: #4a1d1d; --st-cancel-fg: #ff9b9b;
    --st-neutral-bg: #322b4e; --st-neutral-fg: #bdaef0;
    --neg: #ff9b9b;
    --sh-pop: 0 4px 16px rgba(0, 0, 0, .45);
    --sh-modal: 0 12px 32px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --surface: #171b18;
  --surface-2: #212623;
  --line-2: #3d453f;
  --ink-2: #a7b0a9;
  --ink-3: #79837b;
  --accent-soft: #143526;
  --st-draft-bg: #333a35;  --st-draft-fg: #aeb7af;
  --st-issued-bg: #1d3a66; --st-issued-fg: #8ab4ff;
  --st-won-bg: #14402a;    --st-won-fg: #63d597;
  --st-hold-bg: #43350f;   --st-hold-fg: #f0c375;
  --st-cancel-bg: #4a1d1d; --st-cancel-fg: #ff9b9b;
  --st-neutral-bg: #322b4e; --st-neutral-fg: #bdaef0;
  --neg: #ff9b9b;
  --sh-pop: 0 4px 16px rgba(0, 0, 0, .45);
  --sh-modal: 0 12px 32px rgba(0, 0, 0, .6);
}