/* ============================================================
   그룹웨어 테마 — 디자인 시스템(packages/design/kg-tokens.css)의 의미 이름을 그룹웨어 색으로
   이 사이트만의 색은 여기서만 고친다. 공통 값은 디자인 시스템에서.

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

[data-kg-site="groupware"] {
  /* 크림 — 디자인 시스템 기본값과 같다 (따로 덮어쓸 것 없음) */

  /* 사이드바 (두 테마 모두 다크 차콜) */
  --side-bg:      var(--kg-charcoal-700);
  --side-line:    rgba(255,255,255,.08);
  --side-ink:     var(--kg-charcoal-100);
  --side-ink-2:   var(--kg-charcoal-50);
  --side-hover:   rgba(255,255,255,.07);
  --side-active:  var(--kg-charcoal-500);
  --side-active-ink: var(--kg-white);
  --side-badge:   rgba(255,255,255,.14);
  --side-admin:   var(--kg-red-200);     /* 관리자 태그 — 짙은 바탕에 어울리는 부드러운 산호빛 빨강 */
  --side-mgr-line: rgba(255,255,255,.22);
  --side-scroll:  rgba(255,255,255,.18);
  --side-scroll-hover: rgba(255,255,255,.32);
  --side-warn:    var(--kg-orange-400);  /* 사이드바 위 "준비 중" 등 */

  /* 권한 표 (시스템 안내) — 편집자 초록 · 뷰어 파랑 */
  --perm-write: var(--kg-green-600);
  --perm-read:  var(--kg-blue-700);

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

  color-scheme: light;
}

/* ---------- 휴대폰 (좁은 화면) — 20~40대가 쓰는 앱처럼: 강조색 하나(주황), 카드는 테두리 없이 ---------- */
@media (max-width: 900px) {
  [data-kg-site="groupware"] {
    --kg-brand:       var(--kg-orange-500);
    --kg-brand-hover: var(--kg-orange-600);
    --kg-brand-soft:  var(--kg-orange-50);
    --kg-on-brand:    var(--kg-white);
  }
}

/* ---------- 다크 — 사용자가 "다크"를 골랐을 때만 ---------- */
[data-kg-site="groupware"][data-theme="dark"] {
  --kg-bg:        var(--kg-night-900);
  --kg-surface:   var(--kg-night-800);
  --kg-surface-2: var(--kg-night-750);
  --kg-surface-3: var(--kg-night-600);
  --kg-ink:       var(--kg-night-50);
  --kg-ink-2:     var(--kg-night-200);
  --kg-ink-3:     var(--kg-night-300);
  --kg-line:      var(--kg-night-650);
  --kg-line-2:    var(--kg-night-500);

  --kg-brand:       var(--kg-night-100);
  --kg-brand-hover: var(--kg-night-25);
  --kg-brand-soft:  var(--kg-night-550);
  --kg-on-brand:    var(--kg-night-900);

  --kg-good: var(--kg-green-400);  --kg-good-bg: var(--kg-green-950);
  --kg-warn: var(--kg-amber-400);  --kg-warn-bg: var(--kg-amber-950);
  --kg-bad:  var(--kg-red-300);    --kg-bad-bg:  var(--kg-red-950);
  --kg-info: var(--kg-blue-300);   --kg-info-bg: var(--kg-blue-950);
  --kg-sat:  var(--kg-blue-300);

  --kg-chart-ok: var(--kg-slate-300);  --kg-chart-below: var(--kg-amber-450);  --kg-chart-track: var(--kg-night-600);
  --kg-planned: var(--kg-violet-300);  --kg-planned-bg: var(--kg-violet-950);  --kg-planned-row: var(--kg-violet-900);
  --kg-gift:    var(--kg-teal-300);    --kg-gift-bg:    var(--kg-teal-950);    --kg-gift-row:    var(--kg-teal-900);

  /* 알림 알약 — 다크 화면에서는 밝은 알약 */
  --kg-toast-bg:  var(--kg-cream-150);
  --kg-toast-ink: var(--kg-night-850);

  --kg-tag-blue:   var(--kg-blue-300);   --kg-tag-blue-bg:   var(--kg-blue-950);
  --kg-tag-slate:  var(--kg-slate-250);  --kg-tag-slate-bg:  var(--kg-slate-950);
  --kg-tag-green:  var(--kg-green-300);  --kg-tag-green-bg:  var(--kg-green-950);
  --kg-tag-amber:  var(--kg-amber-300);  --kg-tag-amber-bg:  var(--kg-amber-950);
  --kg-tag-red:    var(--kg-red-250);    --kg-tag-red-bg:    var(--kg-red-950);
  --kg-tag-violet: var(--kg-violet-250); --kg-tag-violet-bg: var(--kg-violet-940);
  --kg-on-tag:     var(--kg-night-950);

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

  --side-bg:     var(--kg-night-950);
  --side-line:   rgba(255,255,255,.07);
  --side-active: var(--kg-night-700);

  --perm-write: var(--kg-green-300);
  --perm-read:  var(--kg-blue-300);

  color-scheme: dark;
}