/* 복사본 — 원본: packages/design/kg-tokens.css (직접 고치지 말고 원본을 고친 뒤 npm run sync) */
/* ============================================================
   킹스가든 디자인 시스템 — 값(토큰)   packages/design/kg-tokens.css
   세 사이트(메인 · 그룹웨어 · 베이커리)가 모두 이 파일을 먼저 읽는다. (npm run sync 로 복사, 직접 고치지 말 것)

   3단 구조 (당근 SEED · 토스 TDS 와 같은 방식)
     ① 기본 재료  --kg-<색>-<단계> · 글자 크기 · 여백 · 둥글기   ← 여기에만 실제 색 값이 있다
     ② 의미 이름  --kg-bg · --kg-ink · --kg-brand · --kg-good …  ← 화면 코드는 이 이름만 쓴다
     ③ 사이트 테마 각 사이트 theme.css 가 ②를 덮어쓴다 (사이트마다 다른 색은 거기서만)
   그 아래 "호환 이름"(--bg, --point …)은 예전 화면 코드가 그대로 돌게 ②로 이어 둔 것이다.

   규칙 (테스트가 지킨다 — tests/run.mjs "디자인 시스템")
     · 색 값(#, rgb, hsl)은 이 파일과 각 사이트 theme.css 에만. 다른 CSS·화면 코드는 var(--kg-…)
     · 선택칸·라디오·체크박스·날짜·시간 칸은 디자인 시스템 부품으로만 (kg-components.css · core/ui/form.js)
   ============================================================ */

:root {
  /* ---------- ① 기본 재료 — 색 ---------- */
  --kg-white: #FFFFFF;
  --kg-black: #000000;

  /* 따뜻한 회색 (그룹웨어 바탕) */
  --kg-gray-25:  #FDFCF9;
  --kg-gray-50:  #F4F1EA;
  --kg-gray-100: #EFEBE3;
  --kg-gray-150: #E6E2DA;
  --kg-gray-200: #E4DFD5;
  --kg-gray-250: #E2DDD3;
  --kg-gray-300: #CCC6BA;
  --kg-gray-400: #B9B1A6;
  --kg-gray-500: #858077;
  --kg-gray-600: #55524C;
  --kg-gray-700: #5E5850;
  --kg-gray-900: #1F1E1C;

  /* 어두운 회색 (다크 화면) */
  --kg-night-950: #141416;
  --kg-night-900: #1B1B1D;
  --kg-night-850: #1E1B18;
  --kg-night-800: #232325;
  --kg-night-750: #2B2B2E;
  --kg-night-700: #2E2F34;
  --kg-night-650: #343437;
  --kg-night-600: #353538;
  --kg-night-550: #38393E;
  --kg-night-500: #47474B;
  --kg-night-300: #807D78;
  --kg-night-200: #ABA8A2;
  --kg-night-100: #E3E0D9;
  --kg-night-50:  #ECEAE6;
  --kg-night-25:  #F3F1EC;

  /* 차콜 (그룹웨어 버튼 · 사이드바) */
  --kg-charcoal-900: #1E2024;
  --kg-charcoal-800: #26231F;
  --kg-charcoal-700: #27282C;
  --kg-charcoal-600: #34363B;
  --kg-charcoal-500: #3D3F45;
  --kg-charcoal-100: #ECEAE5;
  --kg-charcoal-50:  #A9A6A0;

  /* 크림 · 갈색 (메인 · 베이커리 브랜드) */
  --kg-cream-25:  #FFFDF8;
  --kg-cream-50:  #FBF8F2;
  --kg-cream-75:  #F8F3EA;
  --kg-cream-100: #F6F1E7;
  --kg-cream-150: #F3EEE6;
  --kg-cream-200: #EFE7D9;
  --kg-cream-250: #EFE6D6;
  --kg-cream-300: #EAE1D1;
  --kg-cream-400: #E3D8C6;
  --kg-cream-500: #D9CDB8;
  --kg-cream-600: #CDBFAA;
  --kg-brown-400: #8A7766;
  --kg-brown-500: #5C4A3B;
  --kg-brown-600: #4A3426;
  --kg-brown-700: #33251A;
  --kg-brown-900: #241B15;

  /* 올리브 (베이커리 강조) */
  --kg-olive-700: #46521F;
  --kg-olive-600: #55622A;
  --kg-olive-100: #DCE3C8;

  /* 신호 · 구분 색 */
  --kg-green-700: #157F3D;  --kg-green-600: #2E7A4F;  --kg-green-500: #2E9A5C;  --kg-green-50: #E7F3EB;
  --kg-green-300: #7CCB9C;  --kg-green-400: #4FB574;  --kg-green-950: #1A2B20;
  --kg-amber-700: #A4661B;  --kg-amber-650: #A2611A;  --kg-amber-800: #8A5A17;  --kg-amber-50: #FAF0E1;
  --kg-amber-400: #D99A3E;  --kg-amber-450: #D08B3A;  --kg-amber-300: #E2A65A;  --kg-amber-950: #2E2617;
  --kg-orange-400: #E0904A;
  --kg-orange-500: #FF6F0F;   /* 강조 주황 — 휴대폰 주 버튼 · 고른 탭 (당근 느낌) */
  --kg-orange-600: #E35F06;
  --kg-orange-50:  #FFF1E6;
  --kg-red-700: #BE3A2B;    --kg-red-650: #B03A2E;    --kg-red-600: #C0392B;    --kg-red-500: #D2493B;   --kg-red-50: #FBEAE7;
  --kg-red-300: #E0736A;    --kg-red-250: #EB8A80;    --kg-red-200: #EE9A86;    --kg-red-950: #31201E;
  --kg-blue-700: #2F5D9E;   --kg-blue-600: #3E63B8;   --kg-blue-50: #E9F0FA;    --kg-blue-300: #8DB4EC;  --kg-blue-950: #1D2738;
  --kg-slate-700: #4A5361;  --kg-slate-600: #5A6372;  --kg-slate-50: #ECEEF1;   --kg-slate-300: #A3ADBD; --kg-slate-250: #B4BCC8; --kg-slate-950: #262A30;
  --kg-violet-700: #6B3FC7; --kg-violet-650: #6B4BB8; --kg-violet-50: #F2EDFC;  --kg-violet-25: #FAF7FE;
  --kg-violet-300: #B69CF5; --kg-violet-250: #B49CF0; --kg-violet-950: #2A2340; --kg-violet-900: #262231; --kg-violet-940: #29233C;
  --kg-teal-700: #0B6F78;   --kg-teal-50: #E3F4F5;    --kg-teal-25: #F5FBFB;    --kg-teal-300: #5CC6CE;  --kg-teal-950: #16302F; --kg-teal-900: #1F2A2A;

  /* 바깥 서비스 브랜드 색 (지도 바로가기) — 그 회사가 정한 색 그대로 */
  --kg-naver: #03C75A;
  --kg-kakao: #FEE500;  --kg-kakao-ink: #191919;
  --kg-google: #4285F4;

  /* 인쇄 — 종이에 찍히는 색 (화면 테마와 상관없이 늘 같다) */
  --kg-paper: #FFFFFF;
  --kg-paper-ink: #000000;
  --kg-paper-fill: #ECECEC;
  --kg-paper-fill-2: #D4D4D4;

  /* ---------- ① 기본 재료 — 글자 ---------- */
  --kg-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --kg-font-brand: "Noto Sans KR", "Pretendard Variable", Pretendard, system-ui, sans-serif;   /* 상호 글자 (KING'S GARDEN) */
  --kg-font-serif: "Noto Serif KR", serif;                                                    /* 메인·베이커리 제목 */
  --kg-font-display: "Cormorant Garamond", "Noto Serif KR", serif;                            /* 첫 장면 큰 글자 */
  --kg-font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --kg-fs-2xs: 11px;  --kg-fs-xs: 13px;  --kg-fs-sm: 14px;  --kg-fs-base: 16px;  --kg-fs-md: 18px;
  --kg-fs-lg: 22px;   --kg-fs-xl: 26px;  --kg-fs-2xl: 32px; --kg-fs-3xl: 42px;
  --kg-lh-tight: 1.25;  --kg-lh: 1.5;

  /* ---------- ① 기본 재료 — 여백 · 모양 · 크기 ---------- */
  --kg-space-1: 4px;   --kg-space-2: 6px;   --kg-space-3: 10px;  --kg-space-4: 14px;
  --kg-space-5: 18px;  --kg-space-6: 22px;  --kg-space-8: 30px;  --kg-space-10: 38px;
  --kg-space-12: 46px; --kg-space-16: 60px;

  --kg-radius-sm: 5px;  --kg-radius: 7px;  --kg-radius-lg: 9px;  --kg-radius-xl: 12px;  --kg-radius-full: 999px;

  --kg-tap: 36px;        /* 마우스 (컴퓨터) — 업무용 크기 */
  --kg-tap-row: 32px;    /* 표 안의 작은 입력 */

  --kg-shadow-lift: 0 18px 30px -22px rgba(36,27,21,.45);   /* 카드를 올렸을 때 */
  --kg-shadow-seg: 0 1px 2px rgba(0,0,0,.08);                /* 상자형 토글에서 고른 칸 */
}

/* ---------- ② 의미 이름 — 기본값 (사이트 테마가 덮어쓴다) ----------
   [data-kg-site] 에도 다시 적는 이유: 디자인 시스템 화면에서 다른 사이트 테마로 미리 보기 할 때
   그 영역 안에서 이 이름들이 그 사이트 색으로 다시 계산되게 */
:root, [data-kg-site] {
  --kg-bg:          var(--kg-gray-50);
  --kg-surface:     var(--kg-gray-25);
  --kg-surface-2:   var(--kg-gray-100);
  --kg-surface-3:   var(--kg-gray-200);
  --kg-ink:         var(--kg-gray-900);
  --kg-ink-2:       var(--kg-gray-600);
  --kg-ink-3:       var(--kg-gray-500);
  --kg-line:        var(--kg-gray-250);
  --kg-line-2:      var(--kg-gray-300);
  --kg-ink-hover:   var(--kg-brown-600);      /* 글자색으로 칠한 버튼(.btn.strong)을 올렸을 때 */

  --kg-brand:       var(--kg-charcoal-600);      /* 주 버튼 · 고른 탭 · 포커스 */
  --kg-brand-hover: var(--kg-charcoal-900);
  --kg-brand-soft:  var(--kg-gray-150);
  --kg-on-brand:    var(--kg-white);

  --kg-good: var(--kg-green-700);   --kg-good-bg: var(--kg-green-50);
  --kg-warn: var(--kg-amber-700);   --kg-warn-bg: var(--kg-amber-50);
  --kg-bad:  var(--kg-red-700);     --kg-bad-bg:  var(--kg-red-50);
  --kg-info: var(--kg-blue-700);    --kg-info-bg: var(--kg-blue-50);
  --kg-sat:  var(--kg-blue-700);    /* 토요일 */

  --kg-planned: var(--kg-violet-700);  --kg-planned-bg: var(--kg-violet-50);  --kg-planned-row: var(--kg-violet-25);
  --kg-gift:    var(--kg-teal-700);    --kg-gift-bg:    var(--kg-teal-50);    --kg-gift-row:    var(--kg-teal-25);

  --kg-badge: var(--kg-red-600);  --kg-badge-ink: var(--kg-white);
  --kg-chart-ok: var(--kg-slate-600);  --kg-chart-below: var(--kg-amber-700);  --kg-chart-track: var(--kg-gray-200);

  /* 진한 띠 · 하단 (짙은 바탕 위 글자) */
  --kg-dark:      var(--kg-brown-900);
  --kg-on-dark:   var(--kg-cream-250);
  --kg-on-dark-2: color-mix(in srgb, var(--kg-cream-250) 72%, transparent);
  --kg-on-dark-3: color-mix(in srgb, var(--kg-cream-250) 16%, transparent);

  /* 알림 알약 (크림·다크 모두 진한 알약) */
  --kg-toast-bg:   var(--kg-charcoal-800);
  --kg-toast-ink:  var(--kg-cream-50);
  --kg-toast-icon: var(--kg-gray-700);
  --kg-toast-good: var(--kg-green-500);
  --kg-toast-bad:  var(--kg-red-500);

  /* 그림자 (아주 얕게) — 다크 화면은 테마에서 더 진하게 */
  --kg-shadow-1: 0 1px 1px rgba(20,20,19,.04);
  --kg-shadow-2: 0 1px 3px rgba(20,20,19,.08);
  --kg-shadow-3: 0 6px 20px rgba(20,20,19,.14);
  --kg-scrim:   rgba(20,18,17,.45);      /* 화면을 덮는 반투명 */
  --kg-overlay: rgba(20,20,22,.66);      /* 사진 위 글자 바탕 */
  --kg-logo:    var(--kg-brown-600);     /* 로고 기본 색 (상호 설정에서 바꿈) */
  --kg-photo-bg: var(--kg-cream-200);    /* 사진 없을 때 자리 */
  --kg-focus:   var(--kg-brand);

  /* 구분 색 (업무 매뉴얼 분류 등) — 글자 / 바탕 */
  --kg-tag-blue:   var(--kg-blue-700);   --kg-tag-blue-bg:   var(--kg-blue-50);
  --kg-tag-slate:  var(--kg-slate-700);  --kg-tag-slate-bg:  var(--kg-slate-50);
  --kg-tag-green:  var(--kg-green-600);  --kg-tag-green-bg:  var(--kg-green-50);
  --kg-tag-amber:  var(--kg-amber-650);  --kg-tag-amber-bg:  var(--kg-amber-50);
  --kg-tag-red:    var(--kg-red-650);    --kg-tag-red-bg:    var(--kg-red-50);
  --kg-tag-violet: var(--kg-violet-650); --kg-tag-violet-bg: var(--kg-violet-50);
  --kg-on-tag:     var(--kg-white);

  /* ---------- 호환 이름 — 예전 화면 코드용 (새 코드는 --kg-… 를 쓴다) ---------- */
  --bg: var(--kg-bg);  --surface: var(--kg-surface);  --surface-2: var(--kg-surface-2);  --surface-3: var(--kg-surface-3);
  --ink: var(--kg-ink);  --ink-2: var(--kg-ink-2);  --ink-3: var(--kg-ink-3);  --ink-on-point: var(--kg-on-brand);
  --line: var(--kg-line);  --line-2: var(--kg-line-2);
  --point: var(--kg-brand);  --point-hover: var(--kg-brand-hover);  --point-soft: var(--kg-brand-soft);  --point-ink: var(--kg-on-brand);
  --good: var(--kg-good);  --good-bg: var(--kg-good-bg);  --warn: var(--kg-warn);  --warn-bg: var(--kg-warn-bg);
  --bad: var(--kg-bad);  --bad-bg: var(--kg-bad-bg);
  --badge: var(--kg-badge);  --badge-ink: var(--kg-badge-ink);
  --chart-ok: var(--kg-chart-ok);  --chart-below: var(--kg-chart-below);  --chart-track: var(--kg-chart-track);
  --planned: var(--kg-planned);  --planned-bg: var(--kg-planned-bg);  --planned-row: var(--kg-planned-row);
  --gift: var(--kg-gift);  --gift-bg: var(--kg-gift-bg);  --gift-row: var(--kg-gift-row);
  --shadow-1: var(--kg-shadow-1);  --shadow-2: var(--kg-shadow-2);  --shadow-3: var(--kg-shadow-3);
  --dark: var(--kg-dark);  --dark-ink: var(--kg-on-dark);
  --tint: var(--kg-photo-bg);  --photo-bg: var(--kg-photo-bg);  --alert-line: var(--kg-ink);
  --font: var(--kg-font);  --font-num: var(--kg-font-num);
  --fs-2xs: var(--kg-fs-2xs);  --fs-xs: var(--kg-fs-xs);  --fs-sm: var(--kg-fs-sm);  --fs-base: var(--kg-fs-base);
  --fs-md: var(--kg-fs-md);  --fs-lg: var(--kg-fs-lg);  --fs-xl: var(--kg-fs-xl);  --fs-2xl: var(--kg-fs-2xl);  --fs-3xl: var(--kg-fs-3xl);
  --lh-tight: var(--kg-lh-tight);  --lh: var(--kg-lh);
  --s-1: var(--kg-space-1);  --s-2: var(--kg-space-2);  --s-3: var(--kg-space-3);  --s-4: var(--kg-space-4);
  --s-5: var(--kg-space-5);  --s-6: var(--kg-space-6);  --s-8: var(--kg-space-8);  --s-10: var(--kg-space-10);
  --s-12: var(--kg-space-12);  --s-16: var(--kg-space-16);
  --r-sm: var(--kg-radius-sm);  --r: var(--kg-radius);  --r-lg: var(--kg-radius-lg);  --r-xl: var(--kg-radius-xl);  --r-full: var(--kg-radius-full);
  --tap: var(--kg-tap);  --tap-row: var(--kg-tap-row);
}

/* 손가락으로 쓰는 기기에서는 넉넉하게 */
@media (pointer: coarse) {
  :root { --kg-tap: 44px; --kg-tap-row: 40px; --kg-fs-base: 16px; }   /* 20~40대 기준 — 애플 최소 누르는 크기 44px · 본문 16px */
}

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