/* 디자인 토큰.
 *
 * ★값의 출처는 `packages/tsc-ui-tokens` 다. 홍보 사이트가 제품과 다른 색을 쓰면
 *   화면을 처음 본 순간 «다른 물건»으로 읽힌다. station-dark 테마를 그대로 가져온다.
 *
 * 상태색(안정/비안정/경고/단절)은 제품에서 **변경 금지** 항목이라 여기서도 그대로 둔다.
 */

:root {
  /* ── 바탕 ── */
  --bg-base:        #040A10;
  --bg-deep:        #02060A;
  --bg-surface:     rgba(34, 211, 238, 0.05);
  --bg-elevated:    rgba(34, 211, 238, 0.10);
  --bg-panel:       #071E26;
  --bg-panel-alt:   #0A2C38;

  /* ── 강조 ── */
  --accent:         #22D3EE;
  --accent-deep:    #0E9BB8;
  --accent-soft:    rgba(34, 211, 238, 0.14);
  --accent-line:    rgba(34, 211, 238, 0.28);
  --accent-glow:    0 0 80px rgba(34, 211, 238, 0.35);
  --accent-alt:     #8B5CF6;   /* 관제 테마 보조색 */
  --amber:          #F5B942;   /* 브랜드 보조. ★상태 표현에 절대 쓰지 않는다 */

  /* ── 글자 ── */
  --text:           #E6F7FC;
  --text-strong:    #FFFFFF;
  --text-muted:     #7FA8B8;
  --text-faint:     #4E7383;

  /* ── 선 ── */
  --line:           rgba(34, 211, 238, 0.16);
  --line-strong:    rgba(34, 211, 238, 0.42);
  --line-soft:      rgba(255, 255, 255, 0.07);

  /* ── 상태색 (제품과 동일. 변경 금지) ── */
  --state-stable:   #34D399;
  --state-unstable: #F87171;
  --state-offline:  #EF4444;
  --state-warn:     #FBBF24;
  --state-idle:     #6B7280;

  /* ── 중량 표시 ── */
  --weight-bg:      #00070D;
  --weight-fg:      #A5F3FC;

  /* ── 형태 ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── 간격 (8px 배수. 섹션만 별도) ── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ── 글꼴 ──
   * 숫자는 반드시 고정폭(tabular-nums)이다. 계량 숫자가 흔들리면 오독이 난다는
   * 제품의 원칙을 홍보 사이트에서도 지킨다. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", "Menlo", "Consolas",
              "Pretendard Variable", monospace;

  /* ── 레이아웃 ── */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --nav-h: 68px;

  /* ── 움직임 ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

/* 저사양·모션 민감 사용자 배려. 제품의 `prefers-reduced-motion` 원칙과 같다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}