/* ──────────────────────────────────────────────────────────────────────────
   sAgent 디자인 시스템 토큰 — 단일 출처(SSOT)
   "sAgent 현황판"과 "IT자산 모니터링"이 같은 색·타이포·간격·상태색·컴포넌트 규칙을 쓴다.
   base.html 에서 board.css 보다 먼저 불러온다. 값은 전부 CSS 변수로만 정의하고,
   컴포넌트(board.css)는 이 변수만 참조한다(하드코딩 hex 금지).
   대비는 WCAG AA(본문 4.5:1, 큰 글자·UI 3:1) 기준으로 고른다.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── 중립(표면·선·글자) ── */
  --bg:#eef1f5; --surface:#ffffff; --sunken:#f4f7fa; --raised:#ffffff;
  --line:#d7dde5; --line-strong:#bcc5d0;
  --ink:#141c25; --muted:#53606f; --faint:#7a8795;

  /* ── 브랜드·보조 ── */
  --accent:#1d4f7c; --accent-soft:#e4edf6; --on-accent:#ffffff;
  --accent-2:#5b4f86; --accent-2-soft:#ece9f5;         /* 보조(핵심 자산·모의·조치 등 보라 계열) */

  /* ── 상태색(의미색) + 연한 배경 ── */
  --ok:#0f7a40;   --ok-soft:#e5f4ec;
  --warn:#8a5a12; --warn-soft:#fbeccf;                 /* 흰 배경 위 글자 AA 통과하는 앰버 한 종으로 통일 */
  --err:#c5302a;  --err-soft:#fbe5e3;
  --info:#1f63c8; --info-soft:#e6eefb;
  --idle:#66727f; --idle-soft:#eceff3;

  /* ── 심각도(채움 배경에 흰 글자) ── */
  --sev-critical:#8b1a14; --sev-high:#c5302a; --sev-medium:#9a6514; --sev-low:#4f6b86; --sev-info:#6f7b8a;

  /* ── 차트·그래프 범주색(dataviz, 6색: 구분·색각 고려) ── */
  --c1:#1d4f7c; --c2:#157f46; --c3:#9a6514; --c4:#5b4f86; --c5:#0f7d84; --c6:#b0453b;

  /* ── 타이포 ── */
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --mono:"IBM Plex Mono","D2Coding",Consolas,monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13.5px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:30px;
  --fw-reg:400; --fw-med:600; --fw-bold:700;
  --lh-tight:1.28; --lh:1.5;

  /* ── 간격(4의 배수 리듬) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ── 모서리·그림자·모션 ── */
  --r-sm:4px; --r:7px; --r-lg:10px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,24,33,.08); --sh-2:0 8px 24px rgba(8,14,20,.18);
  --dur:.16s; --ease:cubic-bezier(.2,.6,.2,1);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e141a; --surface:#172029; --sunken:#111920; --raised:#1d2832;
  --line:#293541; --line-strong:#3a4753;
  --ink:#e6ebf1; --muted:#9aa7b5; --faint:#78848f;
  --accent:#86b7e8; --accent-soft:#1b2c3d; --on-accent:#0e141a;
  --accent-2:#b4a6dd; --accent-2-soft:#272035;
  --ok:#43d083; --ok-soft:#123323;
  --warn:#e6b24f; --warn-soft:#3a2d12;
  --err:#ff6f65; --err-soft:#43201d;
  --info:#86b7e8; --info-soft:#17293d;
  --idle:#8793a1; --idle-soft:#202a34;
  --sev-critical:#ff8a7a; --sev-high:#ff6f65; --sev-medium:#e6b24f; --sev-low:#90b2cc; --sev-info:#8793a1;
  --c1:#86b7e8; --c2:#43d083; --c3:#e6b24f; --c4:#b4a6dd; --c5:#49c2c2; --c6:#f08a7e;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 10px 28px rgba(0,0,0,.5);
  color-scheme:dark}}

:root[data-theme="dark"]{
  --bg:#0e141a; --surface:#172029; --sunken:#111920; --raised:#1d2832;
  --line:#293541; --line-strong:#3a4753;
  --ink:#e6ebf1; --muted:#9aa7b5; --faint:#78848f;
  --accent:#86b7e8; --accent-soft:#1b2c3d; --on-accent:#0e141a;
  --accent-2:#b4a6dd; --accent-2-soft:#272035;
  --ok:#43d083; --ok-soft:#123323;
  --warn:#e6b24f; --warn-soft:#3a2d12;
  --err:#ff6f65; --err-soft:#43201d;
  --info:#86b7e8; --info-soft:#17293d;
  --idle:#8793a1; --idle-soft:#202a34;
  --sev-critical:#ff8a7a; --sev-high:#ff6f65; --sev-medium:#e6b24f; --sev-low:#90b2cc; --sev-info:#8793a1;
  --c1:#86b7e8; --c2:#43d083; --c3:#e6b24f; --c4:#b4a6dd; --c5:#49c2c2; --c6:#f08a7e;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 10px 28px rgba(0,0,0,.5);
  color-scheme:dark}

/* 과거 호환: 일부 컴포넌트가 쓰던 이름 */
:root{ --r:7px; }