:root {
  color-scheme: light;

  --neutral-0:   #ffffff;
  --neutral-50:  #f9fafb;
  --neutral-100: #f2f4f6;
  --neutral-150: #eaecef;
  --neutral-200: #e0e4e8;
  --neutral-300: #c7cdd4;
  --neutral-400: #b0b8c1;
  --neutral-500: #8b95a1;
  --neutral-700: #6b7684;
  --neutral-850: #333d4b;
  --neutral-950: #191f28;

  /* 토스 블루 */
  --brand-100: #ebf3ff;
  --brand-200: #d6e8ff;
  --brand-300: #a9ccff;
  --brand-500: #3182f6;
  --brand-600: #1b64da;
  --brand-700: #1353c2;

  --success-100: #e8f8f1;
  --success-500: #0bb073;

  --warning-100: #fff8e6;
  --warning-500: #f7b731;

  --danger-100: #fff0f0;
  --danger-500: #f04452;
  --danger-700: #c8000a;

  /* 배경 */
  --bg-app:        #f2f4f6;
  --bg-sidebar:    #ffffff;
  --bg-topbar:     rgba(255, 255, 255, 0.97);
  --bg-panel:      transparent;
  --bg-panel-muted:#f7f8fa;
  --bg-card:       #ffffff;
  --bg-card-muted: #f9fafb;
  --bg-danger:     #fff0f0;
  --bg-input:      #f2f4f6;

  /* 텍스트 */
  --text-primary:   #191f28;
  --text-secondary: #6b7684;
  --text-tertiary:  #8b95a1;
  --text-inverse:   #ffffff;

  /* 테두리 */
  --border-subtle:  rgba(0, 0, 0, 0.055);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.18);
  --border-brand:   rgba(49, 130, 246, 0.35);
  --border-danger:  rgba(240, 68, 82, 0.25);

  /* 포커스 */
  --focus-ring:       rgba(49, 130, 246, 0.22);
  --focus-ring-strong: #3182f6;

  /* 그림자 — 토스 특유의 부드러운 그림자 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* 간격 */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* 라운드 — 토스는 넉넉하게 */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* 폰트 */
  --font-xs:  12px;
  --font-sm:  13px;
  --font-md:  15px;
  --font-lg:  17px;
  --font-xl:  22px;
  --font-2xl: 28px;
  --font-3xl: 36px;

  --leading-tight: 1.2;
  --leading-body:  1.5;
  --leading-loose: 1.65;

  --sidebar-width:  216px;
  --topbar-height:  64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-app); }

body {
  min-height: 100vh;
  font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background: var(--bg-app);
  letter-spacing: -0.025em;
}

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