/* ============================================================
   스마트 가계부 · base.css — 디자인 토큰 · 리셋 · 타이포

   색상은 라이트·다크 양쪽에서 WCAG AA(본문 4.5:1)를 넘도록
   맞춰 두었습니다. 토큰을 바꿀 때는 대비를 다시 확인하세요.
   ============================================================ */

:root {
  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --surface-2:   #f0f2f5;
  --border:      #e2e5ea;
  --border-2:    #cfd4dc;
  --text:        #1a1d23;
  --muted:       #5b6472;
  --faint:       #636b78;

  --accent:      #2563eb;
  --accent-weak: #e9f0fe;
  --accent-text: #ffffff;

  --income:      #15803d;
  --expense:     #dc2626;
  --saving:      #2563eb;
  --warn:        #b45309;
  --danger:      #dc2626;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
  --shadow-lg:   0 8px 32px rgba(16,24,40,.14);

  --sidebar-w:   216px;
  --topbar-h:    56px;

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'Malgun Gothic', '맑은 고딕', Roboto, sans-serif;
  --mono: 'Cascadia Mono', Consolas, 'D2Coding', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14161a;
    --surface:     #1c1f25;
    --surface-2:   #23272e;
    --border:      #363c45;
    --border-2:    #3d434d;
    --text:        #e8eaed;
    --muted:       #9aa1ad;
    --faint:       #8b94a1;

    --accent:      #5b9dfb;
    --accent-weak: #16273c;

    --income:      #4ade80;
    --expense:     #f87171;
    --saving:      #60a5fa;
    --warn:        #fbbf24;
    --danger:      #f87171;

    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* 숫자는 자리수 정렬 */
.num { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }