/* ============================================================
   그룹웨어 테마 — 디자인 시스템(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);  /* 사이드바 위 "준비 중" 등 */
  --side-logo-default: var(--kg-white);  /* 사이드바 로고 기본색 (기본 설정에서 고르면 그 색) */

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

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

  color-scheme: light;
}

/* 포인트 색은 PC · 태블릿 · 휴대폰 모두 같다 (화면 폭으로 바꾸지 않는다) — 로그인한 사람의 직급 색은 맨 아래 액센트 컬러 */

/* ---------- 다크 — 사용자가 "다크"를 골랐을 때만 ---------- */
[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-logo-default: var(--kg-orange-500);
  --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;
}

/* ---------- 액센트 컬러 — 로그인한 사람의 직급 색이 화면 전체의 포인트 색 ----------
   직급 색은 --kg-pos-* (디자인 시스템 기본: 대표 보라 · 매니저 파랑 · 직원 초록 · 아르바이트 주황)
   관리 → 기본 설정 → 직급 색에서 바꾸면 <html style="--kg-pos-…"> 로 덮여 태그와 액센트가 같이 바뀐다 (core/accent.js)
   <html data-kg-pos="owner|manager|staff|parttime"> — main.js 가 로그인할 때 붙인다. 직급이 없는 계정(관리자 등)은 기본 색
   주 버튼 · 고른 탭 · 아래 탭 · 포커스 · 오른쪽 위 이름 동그라미가 모두 --kg-brand 를 따른다 */
[data-kg-site="groupware"][data-kg-pos="owner"]    { --kg-brand: var(--kg-pos-owner); }
[data-kg-site="groupware"][data-kg-pos="manager"]  { --kg-brand: var(--kg-pos-manager); }
[data-kg-site="groupware"][data-kg-pos="staff"]    { --kg-brand: var(--kg-pos-staff); }
[data-kg-site="groupware"][data-kg-pos="parttime"] { --kg-brand: var(--kg-pos-parttime); }
[data-kg-site="groupware"][data-kg-pos] {
  --kg-brand-hover: color-mix(in srgb, var(--kg-brand) 82%, var(--kg-ink));
  --kg-brand-soft:  color-mix(in srgb, var(--kg-brand) 12%, var(--kg-surface));
  --kg-on-brand:    var(--kg-white);
}
/* 다크 — 같은 색을 밝게 + 짙은 글자 */
[data-kg-site="groupware"][data-theme="dark"][data-kg-pos="owner"]    { --kg-brand: color-mix(in srgb, var(--kg-pos-owner) 80%, var(--kg-white)); }
[data-kg-site="groupware"][data-theme="dark"][data-kg-pos="manager"]  { --kg-brand: color-mix(in srgb, var(--kg-pos-manager) 80%, var(--kg-white)); }
[data-kg-site="groupware"][data-theme="dark"][data-kg-pos="staff"]    { --kg-brand: color-mix(in srgb, var(--kg-pos-staff) 80%, var(--kg-white)); }
[data-kg-site="groupware"][data-theme="dark"][data-kg-pos="parttime"] { --kg-brand: color-mix(in srgb, var(--kg-pos-parttime) 80%, var(--kg-white)); }
[data-kg-site="groupware"][data-theme="dark"][data-kg-pos] {
  --kg-brand-hover: color-mix(in srgb, var(--kg-brand) 85%, var(--kg-white));
  --kg-brand-soft:  color-mix(in srgb, var(--kg-brand) 18%, var(--kg-surface));
  --kg-on-brand:    var(--kg-night-900);
}