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

     · 그레이 계열. 본문은 크림톤, 사이드바는 다크 차콜
     · 테마는 시스템 설정을 따라가지 않는다. 사용자가 "크림 / 다크"를 직접 고른다 (theme.js)
     · 장식 없이 여백과 글자로 정돈. 포인트(액션)도 차콜 — 색은 신호(좋음·주의·나쁨)에만 쓴다
     · 초보 사장님·고령 직원도 쓰므로 글자·버튼을 작게 만들지 않는다

   ★ 배지(사이드바 숫자)는 두 테마에서 같은 빨강을 쓴다.
   ============================================================ */

:root {
  /* ---------- 배경·표면 ---------- */
  --bg:         #F4F1EA;
  --surface:    #FDFCF9;
  --surface-2:  #EFEBE3;
  --surface-3:  #E4DFD5;

  /* ---------- 글자 ---------- */
  --ink:        #1F1E1C;
  --ink-2:      #55524C;
  --ink-3:      #858077;
  --ink-on-point: #FFFFFF;

  /* ---------- 선 ---------- */
  --line:       #E2DDD3;
  --line-2:     #CCC6BA;

  /* ---------- 포인트 (액션 전용) ---------- */
  --point:      #34363B;
  --point-hover:#1E2024;
  --point-soft: #E6E2DA;

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

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

  /* 차트 — "목표 달성 / 미달" 두 가지만. 차분한 슬레이트 그레이와 주황 (색약에서도 밝기 차이로 구분) */
  --chart-ok:    #5A6372;
  --chart-below: #A4661B;
  --chart-track: #E4DFD5;

  /* 출시 예정 — 상태·차트 색과 겹치지 않는 보라. 글자 대비 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;

  /* ---------- 사이드바 (두 테마 모두 다크 차콜) ---------- */
  --side-bg:      #27282C;
  --side-line:    rgba(255,255,255,.08);
  --side-ink:     #ECEAE5;
  --side-ink-2:   #A9A6A0;
  --side-hover:   rgba(255,255,255,.07);
  --side-active:  #3D3F45;
  --side-badge:   rgba(255,255,255,.14);
  --side-admin:   #EE9A86;   /* 관리자 태그 — 짙은 바탕에 어울리는 부드러운 산호빛 빨강 */

  /* ---------- 그림자 (아주 얕게) ---------- */
  --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;

  /* ---------- 타입 (본문 16px — 작게 줄이지 않는다) ---------- */
  --fs-2xs:  11px;   /* 태그·개수·표 머리 설명 */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   26px;
  --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: 36px;       /* 마우스 기준 (컴퓨터) — 업무용 크기 */
  --tap-row: 32px;   /* 표 안의 작은 입력 */

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

  color-scheme: light;
}

/* 손가락으로 쓰는 기기에서는 넉넉하게 */
@media (pointer: coarse) {
  :root { --tap: 46px; --tap-row: 40px; --fs-base: 17px; }   /* 손가락 (휴대폰·태블릿) */
}

/* ---------- 다크 팔레트 — 사용자가 "다크"를 골랐을 때만 (시스템 설정은 따라가지 않는다) ---------- */
:root[data-theme="dark"] {
  --bg:         #1B1B1D;
  --surface:    #232325;
  --surface-2:  #2B2B2E;
  --surface-3:  #353538;

  --ink:        #ECEAE6;
  --ink-2:      #ABA8A2;
  --ink-3:      #807D78;
  --ink-on-point: #1B1B1D;

  --line:       #343437;
  --line-2:     #47474B;

  --point:      #E3E0D9;
  --point-hover:#F3F1EC;
  --point-soft: #38393E;

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

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

  --chart-ok:    #A3ADBD;
  --chart-below: #D08B3A;
  --chart-track: #353538;
  --planned:     #B69CF5;
  --planned-bg:  #2A2340;
  --planned-row: #262231;
  --gift:        #5CC6CE;
  --gift-bg:     #16302F;
  --gift-row:    #1F2A2A;

  --side-bg:      #141416;
  --side-line:    rgba(255,255,255,.07);
  --side-active:  #2E2F34;

  --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;
  }
}