/* ============================================================
   ui/tokens.css — 디자인 토큰 (v10 · 2026-09-02: 연한 초록 · 흰 사이드바 · 부드러운 그림자)

   색은 전부 여기에만 있다. 이 파일 값만 바꾸면 라이트·다크가 함께 움직인다.

   방향
     · 주조색은 **연한 초록**. 채운 버튼은 연초록 바탕에 진한 글자라 연해도 또렷하다.
     · 면을 나누는 방법을 바꾼다. 얇은 선(hairline) → **부드러운 그림자 + 큰 라운드**.
     · 메뉴는 왼쪽 레일(큰 분류) + 위쪽 바(그 안의 작은 항목) 두 층.
     · 상태색은 초록과 어울리는 인디고·앰버·퍼플·로즈·슬레이트 계열.

   ▸ 눈 피로: 순백·순검정을 쓰지 않는다. 캔버스는 흰 카드보다 한 톤 낮다.
   ▸ 색각 고려: 상태는 색 + 점(·) + 글자를 같이 쓴다.
   ============================================================ */
:root {
  /* ── 바탕 / 표면 (아주 옅은 초록 기운) ────────────── */
  --ground:      #f1f7f3;
  --surface:     #ffffff;
  --surface-2:   #f9fcfa;
  --surface-3:   #edf5f0;
  --surface-sunk:#e3ede6;

  /* ── 잉크 ─────────────────────────────────────────── */
  --ink:    #182019;
  --ink-2:  #414a44;
  --ink-3:  #6c776f;
  --muted:  #98a39b;

  /* ── 라인 (그림자가 주역이라 선은 아주 옅게) ─────── */
  --line:   #e7f0ea;
  --line-2: #d5e3da;

  /* ── 브랜드: 연한 초록 ────────────────────────────── */
  --brand:       #94dba6;   /* 채우는 색 — 연한 초록 (흰색 많이, 파랑 한 방울) */
  --brand-deep:  #80d195;   /* 그 위에 손을 얹었을 때 */
  --brand-ink:   #2c7d4d;   /* 흰 바탕 위 글자·링크 (연한 색은 글자로 못 쓴다) */
  --brand-soft:  #ecf9f0;
  --brand-soft-2:#d3efdc;
  --brand-ring:  rgba(148, 219, 166, .35);
  --brand-rgb:     148, 219, 166;
  --brand-ink-rgb: 44, 125, 77;
  --brand-on:    #0f2a1a;   /* 연한 바탕 위에는 진한 글자 */
  --mint:        #c5f0d2;   /* 짙은 면 위 강조 */
  --sun:         #e2a63c;   /* 테마 토글의 해 (다크에서 보임) */
  --sun-glow:    rgba(226, 166, 60, .45);

  /* ── 상태 (초록과 어울리는 계열) ──────────────────── */
  --st-run:  #12805a;  --st-run-bg:  #e4f5eb;   /* 진행 · 활성 — 딥 그린 */
  --st-wait: #4258c9;  --st-wait-bg: #e8eafb;   /* 대기 · 예정 — 인디고 */
  --st-warn: #b5761a;  --st-warn-bg: #fbf0df;   /* 주의 · 종료 예정 — 앰버 */
  --st-done: #8b3fc4;  --st-done-bg: #f4eafb;   /* 완료 · 테스트 — 퍼플 */
  --st-stop: #c8443c;  --st-stop-bg: #fcebe9;   /* 취소 · 삭제 · 실패 — 레드 */
  --st-idle: #736e80;  --st-idle-bg: #efedf5;   /* 미조회 · 없음 — 슬레이트 */
  --st-plan: #2a72a8;  --st-plan-bg: #e5f0f8;   /* 등록 대기 · 전환 — 블루 */

  /* 순위 변동 — ▲▼ 기호와 함께 쓴다 */
  --up:   #0f8a72;
  --down: #c8443c;

  /* ── 형태 (크게 둥글게) ───────────────────────────── */
  --radius-xs:  8px;
  --radius-sm:  11px;
  --radius:     16px;
  --radius-lg:  22px;
  --radius-pill:999px;

  /* ── 그림자 (면을 나누는 주역) ────────────────────── */
  --shadow-xs: 0 1px 2px rgba(28, 26, 38, .04);
  --shadow-sm: 0 1px 3px rgba(28, 26, 38, .05);
  --shadow:    0 1px 3px rgba(28, 26, 38, .05), 0 10px 28px rgba(28, 26, 38, .05);
  --shadow-lg: 0 28px 70px rgba(28, 26, 38, .20);

  /* ── 간격 ─────────────────────────────────────────── */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap:    16px;
  --gap-lg: 24px;

  /* ── 글자 ─────────────────────────────────────────── */
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 28px; --fs-2xl: 34px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* ── 셸: 왼쪽 레일(큰 분류) + 위쪽 바(작은 항목) ─── */
  --rail-w:      88px;           /* 왼쪽 레일 폭 */
  --wsh-top-h:   62px;           /* 위쪽 바 높이 — sticky 계산이 이 값을 쓴다 */
  --side-bg:     #ffffff;
  --side-line:   #e7f0ea;
  --side-ink:    #5b6760;
  --side-ink-on: #182019;
  --side-on-bg:  var(--brand);
  --side-on-ink: var(--brand-on);
  --side-label:  #9aa398;

  /* 이전 이름 호환 (기존 규칙들이 참조 중) */
  --brand-strong: var(--brand-deep);
  --brand-wash:   var(--brand-soft);
  --brand-wash-2: var(--brand-soft-2);
  --ok:     var(--st-run);
  --warn:   var(--st-warn);
  --danger: var(--st-stop);
  --rail-bg: var(--side-bg);
  --rail-ink: var(--side-ink);
  --rail-ink-on: var(--side-ink-on);
  --rail-line: var(--side-line);
  --rail-on-bg: var(--side-on-bg);
  --rail-on-ink: var(--side-on-ink);
  --wsh-top1-bg: var(--surface);
  --wsh-top1-ink: var(--ink-3);
  --wsh-top1-ink-on: var(--ink);
  --wsh-top2-bg: var(--surface);
  --wsh-top2-line: var(--line);
}

/* ── 다크: 중성 차콜 (색 기운 없이) ──────────────────── */
html[data-theme="dark"] {
  --ground:      #121213;
  --surface:     #1a1a1c;
  --surface-2:   #202022;
  --surface-3:   #292a2c;
  --surface-sunk:#0c0c0d;

  --ink:    #f5f6f7;
  --ink-2:  #d6d8db;
  --ink-3:  #a3a6ab;
  --muted:  #83868c;

  --line:   #2b2c2f;
  --line-2: #3a3c40;

  --brand:       #96e9aa;
  --brand-deep:  #82e099;
  --brand-ink:   #96e9aa;
  --brand-soft:  #172c1f;
  --brand-soft-2:#204030;
  --brand-ring:  rgba(150, 233, 170, .28);
  --brand-rgb:     150, 233, 170;
  --brand-ink-rgb: 150, 233, 170;
  --brand-on:    #08190f;
  --mint:        #c5f0d2;
  --sun:         #f4c469;
  --sun-glow:    rgba(244, 196, 105, .55);

  --st-run:  #96e9aa;  --st-run-bg:  #172c1f;
  --st-wait: #9aa8f5;  --st-wait-bg: #1e2140;
  --st-warn: #e5b366;  --st-warn-bg: #322618;
  --st-done: #c79bec;  --st-done-bg: #2c1f3d;
  --st-stop: #f0a099;  --st-stop-bg: #351f1c;
  --st-idle: #a3a6ab;  --st-idle-bg: #2a2b2e;
  --st-plan: #7fbde8;  --st-plan-bg: #172836;
  --up:   #4dd4b0;
  --down: #f0a099;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow:    0 1px 3px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .28);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .6);

  --side-bg:     #161618;
  --side-line:   #2a2b2e;
  --side-ink:    #a9acb1;
  --side-ink-on: #f5f6f7;
  --side-on-bg:  var(--brand);
  --side-on-ink: var(--brand-on);
  --side-label:  #7f8288;
  color-scheme: dark;
}