/* tokens.css — CSS Custom Properties (디자인 토큰) */

:root {
  /* ── 색상: 배경/서피스 ──────────────────────── */
  --color-bg:                  #0e0e0e;
  --color-surface:             #0e0e0e;
  --color-surface-container:   #191a1a;
  --color-surface-high:        #1f2020;
  --color-surface-highest:     #252626;
  --color-surface-low:         #131313;
  --color-surface-bright:      #2b2c2c;

  /* ── 색상: 텍스트 ───────────────────────────── */
  --color-text:                #e7e5e5;
  --color-text-muted:          #acabaa;

  /* ── 색상: 강조 ─────────────────────────────── */
  --color-primary:             #bcc2ff;
  --color-primary-dim:         #abb3ff;
  --color-primary-hover:       #ced1ff;
  --color-primary-container:   #0022db;
  --color-primary-accent:      #3E53FF;

  /* ── 색상: 보조 ─────────────────────────────── */
  --color-secondary:           #9f9da1;
  --color-secondary-container: #3b3b3f;

  /* ── 색상: 오류/위험 ────────────────────────── */
  --color-danger:              #ec7c8a;
  --color-danger-container:    #7f2737;

  /* ── 색상: 선/구분선 ────────────────────────── */
  --color-border:              #484848;
  --color-border-subtle:       rgba(72, 72, 72, 0.15);

  /* ── 색상: 캔버스 배경 ──────────────────────── */
  --color-canvas-bg:           #131313;

  /* ── 폰트 ───────────────────────────────────── */
  --font-body:   'Inter', 'Pretendard', 'Noto Sans KR', sans-serif;
  --text-xs:     10px;
  --text-sm:     12px;
  --text-base:   13px;
  --text-md:     14px;
  --text-lg:     18px;

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

  /* ── 반경 ───────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ── 그림자 ─────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.3);
  --shadow-md:     0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.5);
  --shadow-canvas: 0 0 40px 0 rgba(0,0,0,.5);

  /* ── 전환 ───────────────────────────────────── */
  --transition: 0.15s ease;

  /* ── 레이아웃 치수 ──────────────────────────── */
  --topbar-height:     56px;
  --sidebar-width:     256px;
  --sidebar-right-width: 288px;
  --bottombar-height:  60px;
  --ruler-size:        20px;
}