/* ===========================================================================
   디자인 토큰 — 시안에서 뽑았다.
   값을 바꿀 때는 여기만 고친다. 화면 CSS 에 색·간격을 직접 적지 않는다.
   =========================================================================== */
:root {
  /* ---- 바탕 ---- */
  --bg:           #eef2f7;   /* 본문 바탕 */
  --surface:      #ffffff;   /* 카드 */
  --surface-2:    #f7f9fc;   /* 카드 안 한 겹 (KPI 보조줄 등) */
  --surface-3:    #eff3f8;   /* 표 머리글 */
  --field:        #fbfcfe;   /* 입력창 */

  /* ---- 어두운 영역 (사이드바·상단바) ---- */
  --nav:          #16243a;
  --nav-2:        #1d2f49;   /* 사이드바 안 눌린 항목 */
  --nav-ink:      #e8eef7;
  --nav-dim:      #93a4bd;
  --nav-active:   #2563eb;

  /* ---- 글자 ---- */
  --ink:          #16243a;
  --ink-2:        #3c4d66;
  --dim:          #67778f;   /* 흰 배경에서 4.6:1 */
  --line:         #dce3ec;
  --line-2:       #eaeff5;

  /* ---- 상태 ----
     초록은 두 단계다. 채움(흰 글자 얹음)과 글자용. */
  --ok:           #16a34a;
  --ok-text:      #15803d;
  --ok-bg:        #e7f7ed;
  --warn:         #b45309;   /* 주의 — 글자용 */
  --warn-fill:    #f59e0b;
  --warn-bg:      #fef5e6;
  --bad:          #c62828;   /* 경보 — 글자용 */
  --bad-fill:     #ef4444;
  --bad-bg:       #fdecec;
  --off:          #6b7a91;
  --off-bg:       #eef1f6;

  /* ---- 계열색 (지표별) ---- */
  --c-temp:       #ef4444;
  --c-humi:       #3b82f6;
  --c-co2:        #10b981;
  --c-press:      #8b5cf6;
  --c-light:      #f59e0b;
  --c-soil:       #0ea5e9;
  --c-ec:         #14b8a6;
  --c-ph:         #a855f7;
  --accent:       #2563eb;
  --accent-bg:    #e8f0fe;

  /* ---- 간격: 4px 격자 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---- 글자 크기: 7단 ---- */
  --fs-1: 11px;  /* 보조 설명 */
  --fs-2: 12px;  /* 라벨·표 머리글 */
  --fs-3: 13px;  /* 본문 작은 것 */
  --fs-4: 15px;  /* 본문 */
  --fs-5: 18px;  /* 소제목 */
  --fs-6: 26px;  /* 값 */
  --fs-7: 34px;  /* KPI 큰 값 */

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(22, 36, 58, .05), 0 1px 3px rgba(22, 36, 58, .04);
  --sh-2: 0 2px 6px rgba(22, 36, 58, .07), 0 8px 20px rgba(22, 36, 58, .05);
  --sh-3: 0 12px 32px rgba(22, 36, 58, .16);

  --dur: .15s;
  --touch: 44px;            /* 장갑 낀 손 최소 치수 */
  --nav-w: 180px;
  --bar-h: 56px;
}

/* 키오스크(넓은 화면)에서는 치수를 올린다. 작은 글자를 멀리서 못 읽는다. */
@media (min-width: 1500px) {
  :root {
    --fs-2: 13px; --fs-3: 14px; --fs-4: 16px;
    --fs-5: 20px; --fs-6: 30px; --fs-7: 42px;
    --touch: 48px; --nav-w: 200px; --bar-h: 60px;
  }
}

/* ===========================================================================
   어두운 테마 — 값만 바꾼다. 화면 CSS 는 손대지 않는다.
   야간에 하우스에서 폰으로 볼 때 눈이 부시지 않게.
   =========================================================================== */
[data-theme="dark"] {
  --bg:         #0e141c;
  --surface:    #161e29;
  --surface-2:  #1b2531;
  --surface-3:  #202b39;
  --field:      #111924;

  --nav:        #0a0f16;
  --nav-2:      #16202c;
  --nav-ink:    #e6edf7;
  --nav-dim:    #8b9bb3;

  --ink:        #e8eef7;
  --ink-2:      #c2cddd;
  --dim:        #93a2b8;        /* 어두운 바탕에서 4.8:1 */
  --line:       #273442;
  --line-2:     #1f2a36;

  --ok-text:    #4ade80;
  --ok-bg:      #10291a;
  --warn:       #fbbf24;
  --warn-bg:    #2a1f08;
  --bad:        #fb7185;
  --bad-bg:     #2b1117;
  --off:        #8b9bb3;
  --off-bg:     #1d2834;
  --accent-bg:  #13243f;
}

/* '기기 설정 따라' 를 고른 경우에만 시스템을 따른다. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #0e141c; --surface: #161e29; --surface-2: #1b2531; --surface-3: #202b39;
    --field: #111924; --nav: #0a0f16; --nav-2: #16202c;
    --ink: #e8eef7; --ink-2: #c2cddd; --dim: #93a2b8;
    --line: #273442; --line-2: #1f2a36;
    --ok-text: #4ade80; --ok-bg: #10291a; --warn: #fbbf24; --warn-bg: #2a1f08;
    --bad: #fb7185; --bad-bg: #2b1117; --off: #8b9bb3; --off-bg: #1d2834;
    --accent-bg: #13243f;
  }
}

/* ===========================================================================
   그래프 계열색 — 겹쳐 그릴 때만 쓴다.
   dataviz 검증기(validate_palette.js)를 통과한 조합이다:
     밝게  #2a78d6 #eb6834 #1baf7a — 모든 쌍 CVD ΔE 9.2 / 정상시 24.0
     어둡게 #3987e5 #d95926 #199e70 — 모든 쌍 CVD ΔE 9.4 / 정상시 20.9
   네 번째를 넣으면(빨강·노랑) 주황과 구분이 안 돼 검사에서 떨어진다.
   그래서 **한 그래프에 세 계열까지**, 그 이상은 작은 배수로 쪼갠다.
   =========================================================================== */
:root {
  --s1: #2a78d6;  /* 계열 1 — 파랑 */
  --s2: #eb6834;  /* 계열 2 — 주황 */
  --s3: #1baf7a;  /* 계열 3 — 아쿠아 */
  --s-band: rgba(42, 120, 214, .16);   /* 최저~최고 띠 */
  --s-on:   #1baf7a;                    /* 상태 띠 — 켜진 구간 */
  --s-off:  #e7eaef;                    /* 상태 띠 — 꺼진 구간 */
}
[data-theme="dark"] {
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s-band: rgba(57, 135, 229, .22);
  --s-on:   #199e70;
  --s-off:  #222c38;
}