/* ============================================================
   SMARTC&S — Design System Foundations
   Colors + Typography tokens (base + semantic)
   계측 · 데이터 관리 · 보안 · 신뢰성
   ============================================================ */

/* IBM Plex Sans KR — engineered grotesque with full Korean support.
   IBM Plex Mono — for measurement values, IDs, code, telemetry.
   Substituted from Google Fonts CDN (no source font files were provided). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --brand-blue: #0070B8;   /* logo blue square */
  --brand-red:  #E81820;   /* logo red square  */
  --brand-ink:  #202020;   /* wordmark charcoal */

  /* ---------- BLUE SCALE (primary · softened) ---------- */
  --blue-50:  #EEF4F9;
  --blue-100: #D6E5F0;
  --blue-200: #AECBE0;
  --blue-300: #74A6CB;
  --blue-400: #3E89BC;
  --blue-500: #1E78B2;  /* base · softened from logo #0070B8 */
  --blue-600: #176192;
  --blue-700: #134E76;
  --blue-800: #103D5C;
  --blue-900: #0C2D43;

  /* ---------- RED SCALE (accent / critical · softened) ---------- */
  --red-50:  #FBEDED;
  --red-100: #F4D5D6;
  --red-200: #E6AAAD;
  --red-400: #DA6166;
  --red-500: #D23A40;  /* base · softened from logo #E81820 */
  --red-600: #B22F35;
  --red-700: #8C2429;

  /* ---------- NEUTRAL / INK (cool charcoal) ---------- */
  --ink-950: #14171A;
  --ink-900: #1A1D21;
  --ink-800: #202020;  /* brand charcoal */
  --ink-700: #33383F;
  --ink-600: #4B525B;
  --ink-500: #6B7280;
  --ink-400: #9AA1AB;
  --ink-300: #C4CAD2;
  --ink-200: #E4E8ED;
  --ink-100: #EDF1F5;
  --ink-50:  #F4F7FA;
  --white:   #FFFFFF;

  /* ---------- STATUS (instrument states) ---------- */
  --ok-50:    #E7F4EE;
  --ok-500:   #1F8A5B;   /* normal / online */
  --ok-600:   #176E48;
  --warn-50:  #FAF2E4;
  --warn-500: #C8861F;   /* warning / drift · softened */
  --warn-600: #A36811;
  --crit-50:  #FBEDED;
  --crit-500: #D23A40;   /* critical / alarm · softened */
  --crit-600: #B22F35;
  --offline:  #9AA1AB;   /* offline / no signal */
  --info-500: #1E78B2;   /* informational (== softened blue) */

  /* ---------- DATA-VIZ SERIES (계측 그래프·마커맵 전용) ----------
     어두운 캔버스(--bg-data) 위 계열 구분색. 상태색(ok/warn/crit)과 목적이 달라
     테마를 따르지 않는다 — 라이트/다크 모두 같은 값. 캔버스 직접그리기는 var() 를
     못 쓰므로 그쪽 리터럴은 이 표와 값을 맞춰 둔 것. */
  --viz-blue:    #3FA0DE;   /* Δx · 가속도 Z */
  --viz-blue-2:  #37A3E0;   /* Δy */
  --viz-teal:    #0F9D8C;   /* 변위 크기 · 강판 마커 */
  --viz-green:   #3FBF6A;   /* 마커맵 T(타겟) */
  --viz-mint:    #5BD6A6;   /* 가속도 Y */
  --viz-amber:   #F2B84B;   /* 가속도 X */
  --viz-orange:  #F0A23A;   /* 마커맵 R(기준) */
  --viz-ochre:   #E08A1E;
  --viz-rust:    #E8531D;   /* 충격(동적 가속도) */
  --viz-rose:    #D9534F;
  --viz-violet:  #6E59D9;   /* Δθ */
  --viz-purple:  #B14FD8;   /* X축 기울기 */
  --viz-indigo:  #7C5CFF;   /* Y축 기울기 */
  --viz-slate:   #9AA4B2;   /* 신뢰도 */
  --viz-slate-2: #5A6B7B;   /* 기준 마커 수 */
  --viz-hull-t:  #BFF0D0;   /* 마커맵 T 외곽선 */
  --viz-hull-r:  #FFD9A8;   /* 마커맵 R 외곽선 */
  --viz-label:   #CDD8EA;   /* 마커맵 거리 라벨 */

  /* ---------- DATA-VIZ 계열(카테고리) 고정 순서 (2026-08-07) ----------
     여러 계열을 "구분"하는 것이 목적일 때만 이 6색을 1번부터 차례로 배정한다 — 순환 금지.
     7계열째부터는 색을 만들지 말고 '기타'로 접거나 소분할(small multiples)한다.
     검증: 6종 자동 검사(밝기 밴드 · 채도 바닥 · CVD 분리 · 정상시야 바닥 · 표면 대비)를
     다크 캔버스 #0F1419 와 화이트 표면 모두 통과(인접쌍 ΔE ≥ 12.4, 2026-08-07).
     3·4·5·6번은 기존 viz-teal/violet/rose/purple 그대로, 1·2번만 밝기 밴드로 스냅.
     상태색(ok/warn/crit/offline)은 계열 색으로 재사용 금지. 조문: areas/guidelines/rules/,
     상세 규칙표: areas/guidelines/content/viz-rules.json */
  --viz-cat-1: #2E93D4;   /* blue   — viz-blue(#3FA0DE) 밴드 스냅 */
  --viz-cat-2: #D07E15;   /* ochre  — viz-ochre(#E08A1E) 밴드 스냅 */
  --viz-cat-3: #0F9D8C;   /* teal   == viz-teal */
  --viz-cat-4: #6E59D9;   /* violet == viz-violet */
  --viz-cat-5: #D9534F;   /* rose   == viz-rose */
  --viz-cat-6: #B14FD8;   /* purple == viz-purple */
  --viz-dim:   #5A6B7B;   /* 문맥(de-emphasis) 계열 — 강조 1색 + 나머지는 이 회색 */
  /* 크기(magnitude)는 Blue 램프 한 색상 light→dark 로, 극성(기준 대비 Δ)은 아래 3종으로 */
  --viz-div-neg: #2E93D4; /* 기준 아래 · 하강 (cool) */
  --viz-div-mid: #9AA1AB; /* 중립 — 반드시 무채색 */
  --viz-div-pos: #E8531D; /* 기준 위 · 상승 (warm == viz-rust) */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-app:       var(--ink-50);
  --bg-surface:   var(--white);
  --bg-raised:    var(--white);
  --bg-sunken:    var(--ink-100);
  --bg-inverse:   var(--ink-900);
  --bg-data:      #0F1419;   /* dark telemetry / chart canvas */

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg1: var(--ink-900);   /* primary text   */
  --fg2: var(--ink-600);   /* secondary text */
  --fg3: var(--ink-500);   /* tertiary / captions */
  --fg4: var(--ink-400);   /* disabled / placeholder */
  --fg-on-brand: var(--white);
  --fg-link: var(--blue-600);

  /* ---------- BORDERS / LINES ---------- */
  --line-1: var(--ink-200);   /* hairline / dividers */
  --line-2: var(--ink-300);   /* default control border */
  --line-strong: var(--ink-700);
  --focus-ring: rgba(0,112,184,0.35);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'IBM Plex Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- TYPE SCALE (1.250 major-third-ish, tuned) ---------- */
  --text-display: 44px;
  --text-h1: 32px;
  --text-h2: 25px;
  --text-h3: 20px;
  --text-h4: 17px;
  --text-body: 15px;
  --text-md: 14px;    /* 목록 행 제목 — sm 과 body 사이 */
  --text-sm: 13px;
  --text-xs: 12px;
  --text-2xs: 11px;   /* 계측 캡션·배지 (밀도 높은 운영 화면용) */
  --text-3xs: 10px;   /* 축 눈금·최소 라벨 */
  --text-mono: 13px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;   /* eyebrows / labels */

  /* ---------- RADII ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 10px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg: 0 12px 26px -6px rgba(16,24,40,0.14), 0 4px 8px -4px rgba(16,24,40,0.07);
  --shadow-inset: inset 0 1px 2px rgba(16,24,40,0.06);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
}
.t-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h1 { font-family: var(--font-sans); font-size: var(--text-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.t-h2 { font-family: var(--font-sans); font-size: var(--text-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.t-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg1); }
.t-h4 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg1); }
.t-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg1); }
.t-body-sec { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg2); }
.t-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg2); }
.t-caption { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg3); }
.t-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--fg1); }
.t-mono { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--fg1); }
.t-metric { font-family: var(--font-mono); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--fg1); }

/* ---------- DARK THEME (2026-07-17) ----------
   시맨틱 토큰만 재매핑한다 — 프리미티브(blue-*, ink-*, crit-* 등)는 불변.
   적용: <html data-theme="dark">. 소비 측이 시맨틱 토큰만 쓰면 자동으로 따라온다. */
[data-theme="dark"] {
  --bg-app:     #0B0E12;
  --bg-surface: #151A21;
  --bg-raised:  #1B222B;
  --bg-sunken:  #0F1419;
  --bg-inverse: var(--ink-50);

  --fg1: #E8ECF1;
  --fg2: #B7BFC9;
  --fg3: #8B939F;
  --fg4: #5E6773;
  --fg-link: var(--blue-300);

  --line-1: #232B35;
  --line-2: #313B47;
  --line-strong: #C3CBD5;
  --focus-ring: rgba(90, 165, 220, 0.4);
}