/* 핸드머니 디자인 토큰 — 역할 기반 이름 (손익관리 계열 토큰 재사용)
   다크모드는 [data-theme="dark"] 한 블록에서만 바꾼다 */
:root {
  /* 색 · 기본 */
  --color-primary: #1153ED;
  --color-primary-hover: #0D47D6;
  --color-primary-pressed: #03369D;
  --color-primary-subtle: #E6EEFF;
  --color-on-primary: #FFFFFF;

  --color-bg: #F2F4F7;
  --color-desk: #E4E8EF;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F4F6F9;
  --color-border: #DBE1E8;
  --color-border-subtle: #EBEEF3;
  --color-scrim: rgba(12, 14, 18, 0.38);

  --text-primary: #131415;
  --text-secondary: #4B5666;
  --text-caption: #767A8C; /* 캡션 전용 — 본문에 쓰지 않는다 */

  /* 색 · 재무 의미 (0이 아닐 때만 상태색) */
  --color-save: #1153ED;
  --color-save-subtle: #EDF2FF;
  --color-spend: #EE8A1F;
  --color-spend-ink: #B35400;
  --color-spend-subtle: #FFF3E5;
  --color-positive: #12805C;
  --color-positive-ink: #0E6B4C;
  --color-positive-subtle: #E5F4EC;
  --color-negative: #D64545;
  --color-negative-ink: #BD2F2F;
  --color-negative-subtle: #FCEAEA;

  /* 저축 종류 */
  --type-installment: #1153ED;
  --type-deposit: #5B4CDB;
  --type-cash: #0E8A8A;
  --type-stock: #8A3FFC;
  --type-fund: #C0399F;
  --type-crypto: #B7791F;
  --type-pension: #0B84C6;
  --type-housing: #3F7D4E;
  --type-etc: #6B7280;

  /* 간격 — 4px 배수만 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --gutter: 20px;

  /* 글자 — 작게, 위계는 굵기로 */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --fs-micro: 11px;
  --fs-meta: 12px;
  --fs-body: 13px;
  --fs-input: 15px;
  --fs-title: 15px;
  --fs-value: 18px;
  --fs-hero: 24px;
  --fw-value: 650;
  --fw-label: 600;
  --fw-body: 500;
  --fw-meta: 450;

  /* 모양 */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* 치수 */
  --header-h: 52px;
  --tabbar-h: 56px;
  --row-h: 34px;
  --row-min: 24px;
  --group-h: 30px;
  --control-h: 44px;

  --focus-ring: 0 0 0 3px rgba(17, 83, 237, 0.28);
  --shadow-sheet: 0 -10px 40px rgba(19, 20, 21, 0.14);
  --shadow-frame: 0 0 0 1px rgba(19, 20, 21, 0.06), 0 28px 70px rgba(19, 20, 21, 0.14);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-primary: #4C7DFF;
  --color-primary-hover: #6690FF;
  --color-primary-pressed: #2F63F0;
  --color-primary-subtle: #1B2645;
  --color-on-primary: #FFFFFF;

  --color-bg: #0E1014;
  --color-desk: #07080A;
  --color-surface: #171A20;
  --color-surface-sunken: #1E2229;
  --color-border: #2C323C;
  --color-border-subtle: #232830;
  --color-scrim: rgba(0, 0, 0, 0.55);

  --text-primary: #EEF0F4;
  --text-secondary: #AEB6C3;
  --text-caption: #7F8797;

  --color-save: #5B8CFF;
  --color-save-subtle: #192440;
  --color-spend: #F29B45;
  --color-spend-ink: #F6AE66;
  --color-spend-subtle: #33251A;
  --color-positive: #3CC48D;
  --color-positive-ink: #52D39E;
  --color-positive-subtle: #142D24;
  --color-negative: #F07272;
  --color-negative-ink: #FF8A8A;
  --color-negative-subtle: #3A1D20;

  --type-installment: #5B8CFF;
  --type-deposit: #8C80FF;
  --type-cash: #2EC2C2;
  --type-stock: #B083FF;
  --type-fund: #E46BC8;
  --type-crypto: #E0A645;
  --type-pension: #3EB2EE;
  --type-housing: #6CC083;
  --type-etc: #9CA3AF;

  --focus-ring: 0 0 0 3px rgba(76, 125, 255, 0.4);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.5);
  --shadow-frame: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 70px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}