/* ==========================================================================
   Navigator console — shell design tokens (UX overhaul Phase U0 "foundation")
   --------------------------------------------------------------------------
   PURELY ADDITIVE: this file only declares --nv-* custom properties, a
   Pretendard @font-face (new family name, loaded only when used) and new
   .nv-* classes. It must never restyle existing selectors, so it can be
   linked BEFORE styles.css on every console page without visual change.
   Spec + rationale: docs/UX_U0_FOUNDATION.md

   Rules (approved UX plan):
   - Hex/rgb colour literals live ONLY in custom-property definitions here.
     Other shell/*.css files must reference var(--nv-*) (tests enforce it).
   - z-index uses exactly 6 levels: map < map-overlay < panel < popover
     (tooltips share it) < toast < modal.
   - Label badges = colour + icon + text (never colour alone).
     Alarm red (--nv-status-critical) is for real alerts only (guardrail 3).
   - Dark is the default; light via :root[data-theme="light"] or the OS
     preference when no explicit data-theme="dark" is set.
   ========================================================================== */

/* Pretendard (SIL OFL 1.1, fonts/LICENSE-Pretendard-OFL.txt) — self-hosted,
   no CDN (closed-network guardrail). Missing file => font-display:swap fallback. */
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/shell/fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/shell/fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/shell/fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/shell/fonts/Pretendard-Bold.woff2") format("woff2"); }

/* ---------- Theme-independent tokens + DARK (default) palette ---------- */
:root {
  /* typography */
  --nv-font-ui: "Pretendard", "NanumSquare Neo", -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --nv-font-num: "Pretendard", ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --nv-fs-2xs: 10px;
  --nv-fs-xs: 11px;
  --nv-fs-sm: 12px;
  --nv-fs-base: 13px;
  --nv-fs-md: 15px;
  --nv-fs-lg: 18px;
  --nv-fs-xl: 22px;
  --nv-lh-tight: 1.25;
  --nv-lh-base: 1.45;
  --nv-fw-regular: 400;
  --nv-fw-medium: 500;
  --nv-fw-semibold: 600;
  --nv-fw-bold: 700;

  /* spacing scale (4px grid) */
  --nv-sp-0: 0;
  --nv-sp-1: 4px;
  --nv-sp-2: 8px;
  --nv-sp-3: 12px;
  --nv-sp-4: 16px;
  --nv-sp-5: 24px;
  --nv-sp-6: 32px;
  --nv-sp-7: 48px;

  /* radius */
  --nv-radius-sm: 2px;
  --nv-radius-md: 3px;
  --nv-radius-lg: 4px;
  --nv-radius-pill: 999px;

  /* z-index — EXACTLY 6 levels, ascending (tests/test_layout_tokens.py) */
  --nv-z-map: 0;
  --nv-z-map-overlay: 10;
  --nv-z-panel: 20;
  --nv-z-popover: 30;
  --nv-z-toast: 40;
  --nv-z-modal: 50;

  /* fixed layout regions */
  --nv-topbar-h: 48px;
  --nv-left-w: 320px;
  --nv-left-w-collapsed: 48px;
  --nv-commander-w-min: 360px;
  --nv-commander-w-max: 560px;
  --nv-commander-w: clamp(var(--nv-commander-w-min), 30vw, var(--nv-commander-w-max));
  --nv-statusbar-h: 28px;
  --nv-gutter: 12px;
  --nv-badge-h: 20px;
  --nv-icon-sm: 14px;
  --nv-icon-md: 18px;
  --nv-icon-lg: 24px;

  /* motion */
  --nv-dur-fast: 120ms;
  --nv-dur-base: 160ms;
  --nv-ease: cubic-bezier(.2, .6, .2, 1);

  /* ----- colours: dark (U1: aligned with docs/REDESIGN_PLAN.md — neutral cool-charcoal
     surfaces + deep pro-blue accent; red = real alerts only; radius 2–4px; no blur) -----
     NOTE: `color-scheme` is intentionally NOT set here (it would restyle native
     scrollbars/controls of existing pages). U1 sets it on the new shell root. */
  --nv-bg-0: #14171c;          /* app canvas / behind map */
  --nv-bg-1: #1b2027;          /* panels */
  --nv-bg-2: #232a33;          /* raised: inputs, cards, hovers */
  --nv-text-1: #e6e9ed;        /* primary */
  --nv-text-2: #a3aebb;        /* secondary */
  --nv-text-3: #929ba6;        /* tertiary / disabled */
  --nv-text-inverse: #14171c;
  --nv-on-accent: #ffffff;      /* U4: text on accent / alarm fills (>= 4.5:1 in every palette) */
  --nv-border: #333b45;
  --nv-divider: #283039;
  --nv-focus: #6ea8ff;
  --nv-accent: #2b66af;
  --nv-accent-strong: #6a9ddb;
  --nv-accent-text: #6a9ddb;    /* U4: accent used AS TEXT (links, active labels) — >= 4.5:1 on every surface */
  --nv-overlay-scrim: rgba(0, 0, 0, 0.55);
  --nv-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --nv-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);

  /* status — critical is ALARM RED: real alerts only */
  --nv-status-good: #3ac174;
  --nv-status-warning: #d69f31;
  --nv-status-critical: #cf4448;
  --nv-status-critical-text: #e57a7c;   /* U4: alarm red AS TEXT on tinted alarm backgrounds (fills keep --nv-status-critical) */
  --nv-status-info: #79b2d2;

  /* provenance labels (7) — always rendered with icon + text */
  --nv-label-live: #33c374;
  --nv-label-representative: #d99d4c;
  --nv-label-simulated: #b8a1d9;
  --nv-label-notional: #e0b040;
  --nv-label-stale: #a3acb5;
  --nv-label-reference: #7aaeeb;
  --nv-label-unverified: #ec955a;
  --nv-label-external: #c798f2;   /* U3: external system source (Neon) — never styled like Korean-basis badges */
  /* force-side colours (wargame / 6·25 unit markers & legends) — data-viz, not alarms.
     Red side is a force colour, NOT the alarm red (--nv-status-critical). */
  --nv-side-blue: #4a9eff;
  --nv-side-red: #ff6b6b;
  --nv-side-neutral: #c9b98a;
  --nv-side-protected: #e8eef4;
}

/* ---------- LIGHT palette (explicit) ---------- */
:root[data-theme="light"] {
  --nv-bg-0: #eceff3;
  --nv-bg-1: #ffffff;
  --nv-bg-2: #f3f5f8;
  --nv-text-1: #1a1f26;
  --nv-text-2: #46505d;
  --nv-text-3: #626c79;
  --nv-text-inverse: #ffffff;
  --nv-on-accent: #ffffff;
  --nv-border: #c5ccd5;
  --nv-divider: #dfe3e8;
  --nv-focus: #1f6feb;
  --nv-accent: #2d72d2;
  --nv-accent-strong: #215db0;
  --nv-accent-text: #1f5fb8;
  --nv-overlay-scrim: rgba(20, 24, 30, 0.35);
  --nv-shadow-1: 0 1px 3px rgba(20, 24, 30, 0.15);
  --nv-shadow-2: 0 4px 16px rgba(20, 24, 30, 0.18);
  --nv-status-good: #1b6a3d;
  --nv-status-warning: #7b5500;
  --nv-status-critical: #b42328;
  --nv-status-critical-text: #b42328;
  --nv-status-info: #266386;
  --nv-label-live: #1b6a3d;
  --nv-label-representative: #86510e;
  --nv-label-simulated: #6c4fa3;
  --nv-label-notional: #7b5800;
  --nv-label-stale: #58606b;
  --nv-label-reference: #1e5eaf;
  --nv-label-unverified: #98440a;
  --nv-label-external: #7a3fb0;
  --nv-side-blue: #1f63b8;
  --nv-side-red: #c43c3c;
  --nv-side-neutral: #8a7a48;
  --nv-side-protected: #4a5360;
}

/* ---------- LIGHT palette (OS preference, unless dark forced) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --nv-bg-0: #eceff3;
    --nv-bg-1: #ffffff;
    --nv-bg-2: #f3f5f8;
    --nv-text-1: #1a1f26;
    --nv-text-2: #46505d;
    --nv-text-3: #626c79;
    --nv-text-inverse: #ffffff;
    --nv-on-accent: #ffffff;
  --nv-on-accent: #ffffff;
    --nv-border: #c5ccd5;
    --nv-divider: #dfe3e8;
    --nv-focus: #1f6feb;
    --nv-accent: #2d72d2;
    --nv-accent-strong: #215db0;
    --nv-accent-text: #1f5fb8;
  --nv-accent-text: #1f5fb8;
    --nv-overlay-scrim: rgba(20, 24, 30, 0.35);
    --nv-shadow-1: 0 1px 3px rgba(20, 24, 30, 0.15);
    --nv-shadow-2: 0 4px 16px rgba(20, 24, 30, 0.18);
    --nv-status-good: #1b6a3d;
    --nv-status-warning: #7b5500;
    --nv-status-critical: #b42328;
    --nv-status-critical-text: #b42328;
  --nv-status-critical-text: #b42328;
    --nv-status-info: #266386;
    --nv-label-live: #1b6a3d;
    --nv-label-representative: #86510e;
    --nv-label-simulated: #6c4fa3;
    --nv-label-notional: #7b5800;
    --nv-label-stale: #58606b;
    --nv-label-reference: #1e5eaf;
    --nv-label-unverified: #98440a;
    --nv-label-external: #7a3fb0;
    --nv-side-blue: #1f63b8;
    --nv-side-red: #c43c3c;
    --nv-side-neutral: #8a7a48;
    --nv-side-protected: #4a5360;
  }
}

/* ==========================================================================
   U4 — palette candidates (the decision is still open with the user).
   data-palette="cool-blue"  = docs/REDESIGN_PLAN.md cool charcoal + pro-blue (DEFAULT; the :root/light blocks above)
   data-palette="warm-green" = styles.css "팔레트 B" (사용자 결정 2026-07-27): warm charcoal #16181c/#212327/#2b2e33,
                               border #3a3d42, text #e6e9ed, accent #5a8f6a (light = derived warm paper + deeper green)
   Change the default: DEFAULT_PALETTE in shell/shell.js (one line). Status/label/side colours are shared.
   ========================================================================== */
:root[data-palette="warm-green"] {
  --nv-bg-0: #16181c;
  --nv-bg-1: #212327;
  --nv-bg-2: #2b2e33;
  --nv-text-1: #e6e9ed;
  --nv-text-2: #a6afb9;
  --nv-text-3: #98a1ab;
  --nv-text-inverse: #16181c;
  --nv-border: #3a3d42;
  --nv-divider: #303338;
  --nv-focus: #8fc79f;
  --nv-accent: #4a7d5a;
  --nv-accent-strong: #79ad89;
  --nv-accent-text: #82b592;
}
:root[data-palette="warm-green"][data-theme="light"] {
  --nv-bg-0: #efeeea;
  --nv-bg-1: #fffefb;
  --nv-bg-2: #f4f2ee;
  --nv-text-1: #1e1d1b;
  --nv-text-2: #4a4741;
  --nv-text-3: #66625a;
  --nv-text-inverse: #ffffff;
  --nv-on-accent: #ffffff;
  --nv-border: #cdc9c2;
  --nv-divider: #e3e0da;
  --nv-focus: #2f7a4a;
  --nv-accent: #3a7550;
  --nv-accent-strong: #2c5e3e;
  --nv-accent-text: #2c6a43;
  --nv-overlay-scrim: rgba(20, 24, 30, 0.35);
  --nv-shadow-1: 0 1px 3px rgba(20, 24, 30, 0.15);
  --nv-shadow-2: 0 4px 16px rgba(20, 24, 30, 0.18);
  --nv-status-good: #1b6a3d;
  --nv-status-warning: #7b5500;
  --nv-status-critical: #b42328;
  --nv-status-critical-text: #b42328;
  --nv-status-info: #266386;
  --nv-label-live: #1b6a3d;
  --nv-label-representative: #86510e;
  --nv-label-simulated: #6c4fa3;
  --nv-label-notional: #7b5800;
  --nv-label-stale: #58606b;
  --nv-label-reference: #1e5eaf;
  --nv-label-unverified: #98440a;
  --nv-label-external: #7a3fb0;
  --nv-side-blue: #1f63b8;
  --nv-side-red: #c43c3c;
  --nv-side-neutral: #8a7a48;
  --nv-side-protected: #4a5360;
}
@media (prefers-color-scheme: light) {
  :root[data-palette="warm-green"]:not([data-theme="dark"]) {
    --nv-bg-0: #efeeea;
    --nv-bg-1: #fffefb;
    --nv-bg-2: #f4f2ee;
    --nv-text-1: #1e1d1b;
    --nv-text-2: #4a4741;
    --nv-text-3: #66625a;
    --nv-text-inverse: #ffffff;
    --nv-on-accent: #ffffff;
  --nv-on-accent: #ffffff;
    --nv-border: #cdc9c2;
    --nv-divider: #e3e0da;
    --nv-focus: #2f7a4a;
    --nv-accent: #3a7550;
    --nv-accent-strong: #2c5e3e;
    --nv-accent-text: #2c6a43;
  --nv-accent-text: #2c6a43;
    --nv-overlay-scrim: rgba(20, 24, 30, 0.35);
    --nv-shadow-1: 0 1px 3px rgba(20, 24, 30, 0.15);
    --nv-shadow-2: 0 4px 16px rgba(20, 24, 30, 0.18);
    --nv-status-good: #1b6a3d;
    --nv-status-warning: #7b5500;
    --nv-status-critical: #b42328;
    --nv-status-critical-text: #b42328;
  --nv-status-critical-text: #b42328;
    --nv-status-info: #266386;
    --nv-label-live: #1b6a3d;
    --nv-label-representative: #86510e;
    --nv-label-simulated: #6c4fa3;
    --nv-label-notional: #7b5800;
    --nv-label-stale: #58606b;
    --nv-label-reference: #1e5eaf;
    --nv-label-unverified: #98440a;
    --nv-label-external: #7a3fb0;
    --nv-side-blue: #1f63b8;
    --nv-side-red: #c43c3c;
    --nv-side-neutral: #8a7a48;
    --nv-side-protected: #4a5360;
  }
}

/* U4 — focus ring + motion (theme-independent; colours from the active palette) */
:root {
  --nv-focus-ring: 0 0 0 2px var(--nv-bg-0), 0 0 0 4px var(--nv-focus);
  --nv-focus-outline: 2px solid var(--nv-focus);
}
@media (prefers-reduced-motion: reduce) {
  :root { --nv-dur-fast: 0ms; --nv-dur-base: 0ms; }
}

/* ==========================================================================
   Provenance label badge — colour + icon + text, fixed height, never wraps,
   ellipsis inside its slot. Markup:
     <span class="nv-badge nv-badge--live">
       <svg class="nv-badge__icon" aria-hidden="true"><use href="/static/shell/icons.svg#nv-live"/></svg>
       <span class="nv-badge__text">LIVE</span>
     </span>
   ========================================================================== */
.nv-badge {
  --nv-badge-c: var(--nv-text-2);
  display: inline-flex; align-items: center; gap: var(--nv-sp-1);
  box-sizing: border-box; height: var(--nv-badge-h); max-width: 100%;
  padding: 0 var(--nv-sp-2); vertical-align: middle;
  border: 1px solid var(--nv-badge-c); border-radius: var(--nv-radius-sm);
  background: color-mix(in srgb, var(--nv-badge-c) 14%, transparent);
  color: var(--nv-badge-c);
  font-family: var(--nv-font-ui); font-size: var(--nv-fs-xs); font-weight: var(--nv-fw-semibold);
  line-height: 1; white-space: nowrap; overflow: hidden; flex: 0 1 auto; min-width: 0;
}
.nv-badge__icon {
  flex: 0 0 auto; width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.nv-badge__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* solid-tinted: measured / produced facts */
.nv-badge--live           { --nv-badge-c: var(--nv-label-live); }
.nv-badge--representative { --nv-badge-c: var(--nv-label-representative); }
.nv-badge--simulated      { --nv-badge-c: var(--nv-label-simulated); }
/* dashed: estimates / no longer current */
.nv-badge--notional       { --nv-badge-c: var(--nv-label-notional); border-style: dashed; }
.nv-badge--stale          { --nv-badge-c: var(--nv-label-stale); border-style: dashed; }
/* outline only (no fill): reference / external */
.nv-badge--reference      { --nv-badge-c: var(--nv-label-reference); background: transparent; }
.nv-badge--unverified     { --nv-badge-c: var(--nv-label-unverified); background: transparent; }
/* U3 external system source (외부 온톨로지 · Neon): dotted outline — visibly not a Korean-basis/policy badge */
.nv-badge--external       { --nv-badge-c: var(--nv-label-external); background: transparent; border-style: dotted; }

/* ---------- utilities ---------- */
.nv-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-tabular  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.nv-icon {
  display: inline-block; flex: 0 0 auto; width: var(--nv-icon-md); height: var(--nv-icon-md);
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em;
}
.nv-icon--sm { width: var(--nv-icon-sm); height: var(--nv-icon-sm); }
.nv-icon--lg { width: var(--nv-icon-lg); height: var(--nv-icon-lg); }