/* ============================================================
   디자인 토큰 — 색·간격·타입의 단일 출처

   업무용 도구 기준으로 잡았다.
     · 글자는 작고 또렷하게, 줄 간격은 좁게 — 한 화면에 많이 보이도록
     · 모서리와 그림자는 절제 — 장식보다 내용
     · 색은 한 가지 포인트(잉크블루)만 액션에 쓰고 나머지는 무채색
     · 신호등 3색은 의미 전달 전용

   ★ 배지(사이드바 숫자)는 라이트·다크에서 같은 빨강을 쓴다.
     테마마다 색이 달라지면 "급한 일"의 무게가 달라 보인다.
   ============================================================ */

:root {
  /* ---------- 배경·표면 ---------- */
  --bg:         #F6F6F5;
  --surface:    #FFFFFF;
  --surface-2:  #F1F1EF;
  --surface-3:  #E8E8E5;

  /* ---------- 글자 ---------- */
  --ink:        #1F1F1E;
  --ink-2:      #575654;
  --ink-3:      #8A8885;
  --ink-on-point: #FFFFFF;

  /* ---------- 선 ---------- */
  --line:       #E3E3E0;
  --line-2:     #CECEC9;

  /* ---------- 포인트 (액션 전용) ---------- */
  --point:      #2B50D8;
  --point-hover:#2242B8;
  --point-soft: #ECF0FE;

  /* ---------- 신호등 ---------- */
  --good:       #157F3D;  --good-bg:  #E7F3EB;
  --warn:       #A4661B;  --warn-bg:  #FAF0E1;
  --bad:        #BE3A2B;  --bad-bg:   #FBEAE7;

  /* ---------- 배지 (두 테마 공통) ---------- */
  --badge:      #C0392B;
  --badge-ink:  #FFFFFF;

  /* 차트 — "목표 달성 / 미달" 두 가지만. 색약 검사(dataviz validate_palette) 통과 값 */
  --chart-ok:    #2B50D8;
  --chart-below: #A4661B;
  --chart-track: #E8E8E5;

  /* 출시 예정 — 상태·차트 색과 겹치지 않는 보라. 글자 대비 5.8~6.6:1 */
  --planned:     #6B3FC7;
  --planned-bg:  #F2EDFC;
  --planned-row: #FAF7FE;
  /* 선물세트 — 청록. 글자 대비 5.2~5.9:1 */
  --gift:        #0B6F78;
  --gift-bg:     #E3F4F5;
  --gift-row:    #F5FBFB;

  /* ---------- 그림자 (아주 얕게) ---------- */
  --shadow-1:  0 1px 1px rgba(20,20,19,.04);
  --shadow-2:  0 1px 3px rgba(20,20,19,.08);
  --shadow-3:  0 6px 20px rgba(20,20,19,.14);

  /* ---------- 글꼴 ---------- */
  --font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', Pretendard,
          'Malgun Gothic', 'Segoe UI', system-ui, sans-serif;
  --font-num: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- 타입 (업무용: 본문 15px) ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   25px;
  --fs-2xl:  32px;
  --fs-3xl:  42px;   /* 대시보드 "남는 돈" — 여기만 크게 */

  --lh-tight: 1.25;
  --lh:       1.5;

  /* ---------- 간격 ---------- */
  --s-1: 4px;   --s-2: 6px;   --s-3: 10px;  --s-4: 14px;
  --s-5: 18px;  --s-6: 22px;  --s-8: 30px;  --s-10: 38px;
  --s-12: 46px; --s-16: 60px;

  /* ---------- 모양 ---------- */
  --r-sm: 5px;  --r: 7px;  --r-lg: 9px;  --r-xl: 12px;  --r-full: 999px;

  /* ---------- 조작 영역 ---------- */
  --tap: 38px;       /* 마우스 기준 */
  --tap-row: 34px;   /* 표 안의 작은 입력 */

  /* ---------- 레이아웃 ---------- */
  --sidebar-w: 224px;
  --header-h:  52px;
  --content-max: 1240px;

  color-scheme: light;
}

/* 손가락으로 쓰는 기기에서는 넉넉하게 */
@media (pointer: coarse) {
  :root { --tap: 46px; --tap-row: 40px; --fs-base: 16px; }
}

/* ---------- 다크 팔레트 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #1A1A19;
    --surface:    #222221;
    --surface-2:  #2A2A29;
    --surface-3:  #333331;

    --ink:        #EDEDEB;
    --ink-2:      #A9A8A5;
    --ink-3:      #7D7C79;

    --line:       #333331;
    --line-2:     #454440;

    --point:      #7690FF;
    --point-hover:#8FA4FF;
    --point-soft: #232B47;

    --good:       #4FB574;  --good-bg:  #1A2B20;
    --warn:       #D99A3E;  --warn-bg:  #2E2617;
    --bad:        #E0736A;  --bad-bg:   #31201E;

    /* 배지는 라이트와 같은 빨강 유지 */
    --badge:      #C0392B;
    --badge-ink:  #FFFFFF;

    --chart-ok:    #6384FA;
    --chart-below: #C48633;
    --chart-track: #333331;
    --planned:     #B69CF5;
    --planned-bg:  #2A2340;
    --planned-row: #262231;
    --gift:        #5CC6CE;
    --gift-bg:     #16302F;
    --gift-row:    #1F2A2A;

    --shadow-1:  0 1px 1px rgba(0,0,0,.3);
    --shadow-2:  0 1px 3px rgba(0,0,0,.4);
    --shadow-3:  0 6px 20px rgba(0,0,0,.5);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:         #1A1A19;
  --surface:    #222221;
  --surface-2:  #2A2A29;
  --surface-3:  #333331;

  --ink:        #EDEDEB;
  --ink-2:      #A9A8A5;
  --ink-3:      #7D7C79;

  --line:       #333331;
  --line-2:     #454440;

  --point:      #7690FF;
  --point-hover:#8FA4FF;
  --point-soft: #232B47;

  --good:       #4FB574;  --good-bg:  #1A2B20;
  --warn:       #D99A3E;  --warn-bg:  #2E2617;
  --bad:        #E0736A;  --bad-bg:   #31201E;

  --badge:      #C0392B;
  --badge-ink:  #FFFFFF;

    --chart-ok:    #6384FA;
    --chart-below: #C48633;
    --chart-track: #333331;
    --planned:     #B69CF5;
    --planned-bg:  #2A2340;
    --planned-row: #262231;
    --gift:        #5CC6CE;
    --gift-bg:     #16302F;
    --gift-row:    #1F2A2A;

  --shadow-1:  0 1px 1px rgba(0,0,0,.3);
  --shadow-2:  0 1px 3px rgba(0,0,0,.4);
  --shadow-3:  0 6px 20px rgba(0,0,0,.5);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}