/* ===========================================================================
   Nexus-HUD 디자인 토큰 (웹)
   원본: PostalNexus/docs/design/design-tokens.json — 값이 바뀌면 여기도 맞출 것.
   다크 전용이다. 라이트 모드에서는 글로우가 성립하지 않는다.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* ── 배경 ─────────────────────────────────────────────── */
  --nx-bg-abyss: #03070a;
  --nx-bg-base: #050d12;
  --nx-bg-sunken: #040a0e;
  --nx-bg-circuit: #071319;

  /* ── 표면 (위로 뜰수록 밝아진다) ─────────────────────── */
  --nx-s1: #0a1a21;
  --nx-s2: #0d242e;
  --nx-s3: #113140;
  --nx-s-header: #0b2029;

  /* ── 강조 ─────────────────────────────────────────────── */
  --nx-accent: #00e5ff;
  --nx-accent-glow: #22f5e0;
  --nx-accent-dim: #0e7c8c;
  --nx-secondary: #7c5cff;

  /* ── 텍스트 ───────────────────────────────────────────── */
  --nx-text: #cff7ff;
  --nx-text-2: #7fb3c2;
  --nx-text-muted: #4a7381;
  --nx-text-on-accent: #02181c;

  /* ── 상태 ─────────────────────────────────────────────── */
  --nx-ok: #00ffa3;
  --nx-warn: #ffc24b;
  --nx-error: #ff4d6d;
  --nx-info: #35c8ff;

  /* ── 경계선 ───────────────────────────────────────────── */
  --nx-border: rgba(0, 229, 255, 0.22);
  --nx-border-strong: rgba(0, 229, 255, 0.55);
  --nx-border-inner: rgba(255, 255, 255, 0.06);
  --nx-divider: rgba(0, 229, 255, 0.1);

  /* ── 엘리베이션: 그림자 + 글로우 + 상단 베벨 3중 레이어 ─ */
  --nx-e1: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 229, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --nx-e2: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 229, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --nx-e3: 0 12px 28px rgba(0, 0, 0, 0.65), 0 0 28px rgba(0, 229, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --nx-e4: 0 20px 44px rgba(0, 0, 0, 0.72), 0 0 42px rgba(0, 229, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);

  /* ── 글로우 (텍스트/아이콘 발광, 오프셋 0) ───────────── */
  --nx-glow-soft: 0 0 8px rgba(0, 229, 255, 0.55);
  --nx-glow-strong: 0 0 16px rgba(34, 245, 224, 0.8);
  --nx-glow-ok: 0 0 14px rgba(0, 255, 163, 0.85);
  --nx-glow-error: 0 0 10px rgba(255, 77, 109, 0.7);

  /* ── 반경 (너무 둥글면 산업용 느낌이 사라진다) ────────── */
  --nx-r-sm: 3px;
  --nx-r-md: 6px;
  --nx-r-lg: 10px;
  --nx-r-xl: 16px;
  --nx-r-pill: 999px;

  /* ── 간격 4px 그리드 ──────────────────────────────────── */
  --nx-sp-1: 4px;
  --nx-sp-2: 8px;
  --nx-sp-3: 12px;
  --nx-sp-4: 16px;
  --nx-sp-5: 20px;
  --nx-sp-6: 24px;
  --nx-sp-8: 32px;
  --nx-sp-10: 40px;
  --nx-sp-12: 48px;
  --nx-sp-16: 64px;
  --nx-sp-20: 80px;
  --nx-sp-24: 96px;

  /* ── 타이포 ───────────────────────────────────────────── */
  --nx-font-sans: "Pretendard Variable", Pretendard, Inter, "Segoe UI", sans-serif;
  --nx-font-mono: "JetBrains Mono", Pretendard, "Cascadia Mono", Consolas, monospace;
  --nx-fs-xs: 11px;
  --nx-fs-sm: 13px;
  --nx-fs-base: 14px;
  --nx-fs-md: 16px;
  --nx-fs-lg: 20px;
  --nx-fs-xl: 26px;
  --nx-fs-2xl: 36px;
  --nx-fs-hero: 48px;
  /* 다크 배경 본문 기본 웨이트는 500. 400 은 한글 가로획이 묻힌다. */
  --nx-fw-base: 500;
  --nx-tracking: 0.12em;

  /* ── 모션 ─────────────────────────────────────────────── */
  --nx-t-fast: 120ms ease-out;
  --nx-t-normal: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --nx-t-slow: 420ms ease-in-out;

  /* ── 레이아웃 ─────────────────────────────────────────── */
  --nx-container: 1240px;
  --nx-container-narrow: 860px;
  --nx-header-h: 68px;
}

@media (max-width: 720px) {
  :root {
    --nx-fs-hero: 32px;
    --nx-fs-2xl: 26px;
    --nx-fs-xl: 21px;
    --nx-header-h: 60px;
  }
}