/* ============================================================
   SMARTC&S — Design System Foundations  (vendored from
   "SMARTC&S Design System/colors_and_type.css", @import dropped —
   fonts are self-hosted in 05_fonts.css)
   Colors + Typography tokens (base + semantic)
   계측 · 데이터 관리 · 보안 · 신뢰성
   ============================================================ */

: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;
  --crit-200: #E6AAAD;
  --offline:  #9AA1AB;   /* offline / no signal */
  --info-500: #1E78B2;   /* informational (== softened blue) */

  /* ---------- 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-sm: 13px;
  --text-xs: 12px;
  --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); }

/* shared helper: any mono numeric */
.ds-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }