/* ============================================================
   디자인 토큰 — 다크 고정. 이 파일 밖에서 hex 를 직접 쓰지 않는다.
   대비는 scripts/check_contrast.py 가 이 파일을 파싱해 검증한다.
   ============================================================ */

@font-face {
  font-family: 'Pretendard Variable';
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- 지면 사다리 (hue 200~205, 저채도) ------------------- */
  --bg-app:    #0F1418;
  --bg-panel:  #161C21;
  --bg-raised: #1E262C;   /* row hover · 선택 행 */
  --bg-inset:  #0B0F12;   /* 표 헤더 스트립 · well */

  /* --- 본문: 단일 색의 알파 사다리 ------------------------- */
  --fg:        #D5DEE4;
  --fg-muted:  rgba(213,222,228,0.74);
  --fg-faint:  rgba(213,222,228,0.60);
  --fg-dim:    rgba(213,222,228,0.46);   /* 해제된 알람 등 '지나간 것' 전용 — 본문 아님 */

  /* --- 선: 회색이 아니라 본문색 알파 ----------------------- */
  --line:        rgba(213,222,228,0.12);
  --line-strong: rgba(213,222,228,0.20);

  /* --- 액센트: 인터랙션 전용 (선택·포커스·활성탭·주버튼) --- */
  --accent:       #35C2C7;
  --accent-weak:  rgba(53,194,199,0.14);
  --accent-line:  rgba(53,194,199,0.42);
  --accent-fg:    #06232B;

  /* --- 상태 6단계 — 액센트와 절대 겹치지 않는다 -------------
     -X      : 도트·바·테두리용 원색
     -X-fg   : 칩(색 14% 배경) 위에서 4.5:1 을 넘기는 밝은 변형     */
  --st-normal:     #3FB27F;  --st-normal-fg:  #7ED8AC;
  --st-watch:      #C9B458;  --st-watch-fg:   #E2D089;
  --st-caution:    #DE9346;  --st-caution-fg: #F2B27A;
  --st-fault:      #E0605A;  --st-fault-fg:   #F49991;
  --st-service:    #6F8CA6;  --st-service-fg: #ABBFD1;
  /* 측정불가 = 색 없음. --fg-faint + 대각 해치 */
  --st-unknown-fg: rgba(213,222,228,0.60);


  /* --- 파생 토큰: 칩 면/선, 상태면 위 글자, 셀렉트 캐럿 -----
     컴포넌트 CSS 는 여기 정의된 것만 쓴다 (hex 직접 사용 금지). */
  --chip-normal-bg:  rgba(63,178,127,0.14);   --chip-normal-ln:  rgba(63,178,127,0.30);
  --chip-watch-bg:   rgba(201,180,88,0.14);   --chip-watch-ln:   rgba(201,180,88,0.30);
  --chip-caution-bg: rgba(222,147,70,0.14);   --chip-caution-ln: rgba(222,147,70,0.30);
  --chip-fault-bg:   rgba(224,96,90,0.14);    --chip-fault-ln:   rgba(224,96,90,0.30);
  --chip-service-bg: rgba(111,140,166,0.14);  --chip-service-ln: rgba(111,140,166,0.30);

  /* 상태 원색 면 위의 글자 — 지면 톤의 짙은 색 */
  --on-status:       rgba(9,17,21,0.82);
  --on-status-light: rgba(232,240,245,0.94);

  --sel-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(213,222,228,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --chip-alpha: 0.14;
  --chip-line-alpha: 0.30;

  /* --- 밀도 (고밀도 관제) --------------------------------- */
  --row-h:        34px;
  --cell-pad:     6px 10px;
  --panel-pad:    16px;
  --gap-panel:    12px;
  --gap-section:  24px;
  --cell-size:    26px;
  --cell-gap:     4px;

  /* --- radius 2단 ----------------------------------------- */
  --r-ctl:   6px;
  --r-panel: 10px;

  /* --- 타이포 --------------------------------------------- */
  --ff-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-tbl: 13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-kpi: 28px;

  /* --- 모션 ----------------------------------------------- */
  --dur:        160ms;
  --dur-mode:   220ms;
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- 오버레이 그림자 (오버레이에만) --------------------- */
  --shadow-overlay: 0 8px 24px rgba(0,0,0,.45);

  /* --- 측정불가 해치 -------------------------------------- */
  --hatch: repeating-linear-gradient(
      45deg,
      rgba(213,222,228,0.16) 0 1px,
      transparent 1px 5px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-mode: 0ms; }
}