/* ═══════════════════════════════════════════════════════════════
   tokens.css — Notion-style 디자인 토큰
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 색상 (Notion 톤) ── */
  --c-bg:          #ffffff;
  --c-bg-sub:      #fbfbfa;
  --c-bg-hover:    #f1f1ef;
  --c-bg-active:   #e8e8e5;

  --c-border:        #e3e2de;
  --c-border-strong: #d3d1cb;

  --c-text:        #37352f;
  --c-text-sub:    #6b6b6b;
  --c-text-muted:  #9b9a97;

  --c-primary:     #2383e2;
  --c-primary-h:   #1b6ec2;
  --c-primary-bg:  #e8f0fe;

  --c-success:     #0f7b0f;
  --c-success-bg:  #dbeddb;
  --c-warn:        #d9730d;
  --c-warn-bg:     #fdecc8;
  --c-danger:      #e03e3e;
  --c-danger-bg:   #fbe4e4;
  --c-info:        #2383e2;
  --c-info-bg:     #e8f0fe;

  /* ── 폰트 ── */
  --font-sans:   'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* ── 폰트 3단계로 통일 ──
     - 보조(11): 부제목/캡션/안내문
     - 메인(12): 거의 모든 텍스트 — 버튼/메뉴/표/폼/그리드/본문
     - 상단(13): 상단바 상태표시만
  */
  --font-size-xs: 11px;      /* 보조 */
  --font-size-sm: 11px;      /* 보조 */
  --font-size:    12px;      /* 메인 */
  --font-size-md: 12px;      /* 메인 */
  --font-size-lg: 12px;      /* 메인 */
  --font-size-xl: 13px;      /* 상단바 상태표시만 */
  --fw:           400;
  --fw-medium:    500;
  --fw-bold:      600;
  --fw-heavy:     700;

  /* ── 간격 ── */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── 컨트롤 ── */
  --ctrl-h:        32px;
  --ctrl-r:        2px;
  --ctrl-px:       6px;
  --ctrl-border:   var(--c-border-strong);
  --ctrl-border-w: 1px;
  --ctrl-font:     var(--font-size);

  /* ── 아이콘 3단계 규격 ── */
  --icon-sm:       14px;   /* 버튼/인라인 (기본) */
  --icon-md:       16px;   /* 메뉴/사이드바 */
  --icon-lg:       20px;   /* 카드/특수강조 */
  --ctrl-icon:     var(--icon-sm);

  /* ── 패널 ── */
  --panel-head-h:   52px;
  --panel-head-px:  16px;
  --panel-body-pad: 20px;
  --panel-r:        0;
  --r-xs:           2px;
  --r-sm:           2px;
  --r-md:           2px;
  --r-lg:           2px;
  --panel-shadow:   none;

  /* ── 섹션 타이틀 ── */
  --section-icon: 16px;
  --section-font: var(--font-size-md);

  /* ── 그리드 ── */
  --grid-row-h:    28px;
  --grid-head-h:   28px;
  --grid-cell-px:  4px;

  /* ── 사이드바 ── */
  --sidebar-w:    240px;
  --sidebar-bg:   #fbfbfa;

  /* ── z-index ── */
  --z-overlay: 1000;
  --z-toast:   2000;
  --z-modal:   3000;

  /* ── 트랜지션 ── */
  --t-fast:   100ms;
  --t-normal: 200ms;
}