/* =========================================================================
   안전캠 SafetyCam — Design Tokens (단일 출처)
   대시보드 개편(.sc) 화면이 참조하는 색·타입·간격·라디우스·그림자 토큰.
   기존 design.css 는 건드리지 않음 — 이 파일이 신규 디자인 토큰의 source of truth.
   폰트는 기존 /static/fonts 자산을 그대로 사용(경로만 ../fonts).
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/* FONTS — 기존 static/fonts 자산 재사용                                     */
/* NEXON Lv2 Gothic = 브랜드/제품 UI 폰트. Pretendard(본문)·Paperlogy(디스플레이) 번들. */
/* ----------------------------------------------------------------------- */
@font-face { font-family: "NexonLv2Gothic"; src: url("../fonts/NEXON-Lv2-Gothic-OTF.woff") format("woff");        font-weight: 400; font-display: swap; }
@font-face { font-family: "NexonLv2Gothic"; src: url("../fonts/NEXON-Lv2-Gothic-OTF-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "NexonLv2Gothic"; src: url("../fonts/NEXON-Lv2-Gothic-OTF-Bold.woff") format("woff");   font-weight: 700; font-display: swap; }

@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Light.woff2") format("woff2");     font-weight: 300; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Regular.woff2") format("woff2");   font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Medium.woff2") format("woff2");    font-weight: 500; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");  font-weight: 600; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Bold.woff2") format("woff2");      font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

@font-face { font-family: "Paperlogy"; src: url("../fonts/Paperlogy-4Regular.woff2") format("woff2");   font-weight: 400; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("../fonts/Paperlogy-5Medium.woff2") format("woff2");    font-weight: 500; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("../fonts/Paperlogy-6SemiBold.woff2") format("woff2");  font-weight: 600; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("../fonts/Paperlogy-7Bold.woff2") format("woff2");      font-weight: 700; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("../fonts/Paperlogy-8ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* ===================================================================== */
  /* BRAND / ACCENT                                                        */
  /* ===================================================================== */
  --blue:           #3285ff;   /* primary action / focus */
  --blue-light:     #51a3ff;
  --blue-dark:      #2158a8;   /* primaryColorD — active rows, hovers */
  --cyan:           #6ab0ff;
  --cyan-bright:    #00b2ff;   /* login highlight, active borders */
  --teal:           #00757d;   /* secondary */
  --orange:         #ffcf5f;   /* warning accent, emphasised numbers */
  --orange-strong:  #ff852e;
  --tertiary:       #d64c00;   /* tertiary action */
  --tertiary-light: #ee5807;
  --tertiary-dark:  #be4300;
  --purple:         #6a79f8;
  --brown:          #b56a00;

  /* Signature SafetyCam gradient (logo mark + active CCTV viewer border) */
  --brand-gradient: linear-gradient(to right bottom, #2cffce, #4d9eff, #d15cff);
  --brand-grad-start: #2cffce;
  --brand-grad-mid:   #4d9eff;
  --brand-grad-end:   #d15cff;

  /* ===================================================================== */
  /* STATUS                                                                */
  /* ===================================================================== */
  --danger:   #ff5353;   /* warning / accident / alert badge */
  --success:  #06b10a;   /* OK / resolved */
  --warning:  #ffcf5f;
  --info:     #3285ff;

  /* Event/accident category palette (6 detection types) */
  --accident-01: #5a6ed8;  /* 침입 감지 — intrusion */
  --accident-02: #47b8f8;  /* 배회 / 이동 — loitering / motion */
  --accident-03: #ff5353;  /* 쓰러짐 — fall / collapse */
  --accident-04: #2db28b;  /* 보호구 미착용 — PPE */
  --accident-05: #f73463;  /* 위험구역 진입 — danger zone */
  --accident-06: #ff852e;  /* 화재 / 연기 — fire / smoke */

  /* ===================================================================== */
  /* TEXT (on dark)                                                        */
  /* ===================================================================== */
  --fg-strong: #fafaf8;   /* textColorMain — headings, key values */
  --fg:        #d8e1e6;   /* textColor — default body */
  --fg-muted:  #a6b4c5;   /* secondary labels, nav */
  --fg-subtle: #7d848d;   /* placeholders, captions, disabled */

  /* ===================================================================== */
  /* SURFACES (dark control-room stack)                                    */
  /* ===================================================================== */
  --bg-app:      linear-gradient(to bottom, #293037, #2f363e); /* body */
  --bg-app-top:  #293037;
  --bg-app-btm:  #2f363e;
  --surface-header: #1f232b;  /* top bar */
  --surface-card:   #2f3741;  /* primary panels, login card, tables */
  --surface-panel:  #262b36;  /* popups, dropdowns, slide rail */
  --surface-raised: #3f4f63;  /* secondary buttons, chips */
  --surface-sunken: #1a1d22;  /* focused input bg */
  --surface-row:    #262d35;  /* sticky table head */
  --surface-tint:   rgba(58, 131, 204, 0.13); /* table head / viewer head tint */
  --scrim:          rgba(0, 0, 0, 0.45);
  --scrim-glass:    rgba(31, 35, 43, 0.8);     /* + backdrop-blur(4px) overlays */

  /* Header has a gradient hairline border bottom */
  --header-border: linear-gradient(to bottom, #64758b, #1f232b);
  /* Section header bar (sub-left / details summary) */
  --section-bar:   linear-gradient(to bottom, #2b426a, #223351);

  /* ===================================================================== */
  /* BORDERS & LINES                                                       */
  /* ===================================================================== */
  --line:        rgba(110, 126, 146, 0.2);   /* gray100 — default divider */
  --line-strong: #4b5362;
  --line-input:  #1f2326;
  --line-btn:    #585e66;
  --gray900:     rgba(0, 0, 0, 0.18);         /* input fill / thead fill */

  /* ===================================================================== */
  /* TYPE                                                                  */
  /* ===================================================================== */
  --font-ui:      "NexonLv2Gothic", "Apple SD Gothic Neo", "Malgun Gothic", "Pretendard", dotum, sans-serif;
  --font-body:    "Pretendard", "NexonLv2Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Paperlogy", "NexonLv2Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-mono:    "JetBrains Mono", "D2Coding", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-basic: 16px;   /* base body size */
  --lh-base: 1.5;

  /* Type scale (px) — observed across views */
  --fs-display: 32px;  /* page titles (.sub-contents-header h2), login emphasis */
  --fs-h1:      28px;  /* big stat numbers, login headline */
  --fs-h2:      18px;  /* popup / panel headings, header clock */
  --fs-h3:      16px;  /* section titles */
  --fs-body:    16px;  /* default */
  --fs-sm:      15px;  /* dense tables, sub labels */
  --fs-xs:      14px;  /* buttons, captions */
  --fs-2xs:     13px;  /* chips, thumbnail meta */
  --fs-micro:   11px;  /* notification count */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;

  /* ===================================================================== */
  /* SPACING                                                               */
  /* ===================================================================== */
  --space-xs: 12px;
  --space-s:  24px;
  --space-m:  32px;
  --space-l:  50px;
  --space-xl: 80px;

  /* ===================================================================== */
  /* RADIUS                                                                */
  /* ===================================================================== */
  --radius-btn:   2px;   /* default control radius — sharp, technical */
  --radius-sm:    4px;   /* dropdowns, logout btn, page buttons */
  --radius-md:    8px;   /* cards, cctv-viewer, slide thumbs */
  --radius-lg:    12px;  /* rounded inputs (.sm), pill chips */
  --radius-xl:    24px;  /* login card */
  --radius-pill:  500px;

  /* ===================================================================== */
  /* ELEVATION / SHADOW                                                    */
  /* ===================================================================== */
  --shadow-header: 0 8px 12px rgba(0, 0, 0, 0.18);
  --shadow-card:   0 4px 12px rgba(31, 35, 43, 0.8);
  --shadow-pop:    0 16px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow:   0 0 18px rgba(31, 35, 43, 0.8);
  --shadow-focus:  0 4px 6px rgba(0, 0, 0, 0.45);
  --shadow-active-row: 0 4px 6px rgba(0, 0, 0, 0.45);

  /* ===================================================================== */
  /* CONTROLS                                                              */
  /* ===================================================================== */
  --btn-height:  36px;
  --btn-padding: 12px;
  --scroll-width: 6px;
  --site-width:  1900px;
}

/* ----------------------------------------------------------------------- */
/* SEMANTIC TYPE PRESETS (.sc 스코프)                                        */
/* ----------------------------------------------------------------------- */
.sc .sc-display { font-family: var(--font-ui); font-size: var(--fs-display); font-weight: 700; color: var(--fg-strong); line-height: 1; }
.sc .sc-h1      { font-family: var(--font-ui); font-size: var(--fs-h1);      font-weight: 700; color: var(--fg-strong); line-height: 1.1; }
.sc .sc-h2      { font-family: var(--font-ui); font-size: var(--fs-h2);      font-weight: 700; color: var(--fg-strong); }
.sc .sc-h3      { font-family: var(--font-ui); font-size: var(--fs-h3);      font-weight: 500; color: var(--fg-strong); }
.sc .sc-body    { font-family: var(--font-ui); font-size: var(--fs-body);    font-weight: 400; color: var(--fg); line-height: 1.5; }
.sc .sc-sm      { font-family: var(--font-ui); font-size: var(--fs-sm);      font-weight: 400; color: var(--fg); }
.sc .sc-label   { font-family: var(--font-ui); font-size: var(--fs-xs);      font-weight: 500; color: var(--fg-muted); }
.sc .sc-caption { font-family: var(--font-ui); font-size: var(--fs-2xs);     font-weight: 400; color: var(--fg-subtle); }
.sc .sc-stat    { font-family: var(--font-ui); font-size: var(--fs-h1);      font-weight: 700; color: var(--orange); line-height: 1; }