/* css/variables.css — 디자인 토큰 (다크 항공 관제 대시보드) */
:root {
  /* 배경 계층 */
  --bg-app: #0b1220;         /* 다크 네이비 */
  --bg-panel: #141c2b;       /* 차콜 패널 */
  --bg-panel-2: #1b2536;
  --bg-elev: #202b3f;
  --bg-input: #0f1727;

  /* 텍스트 */
  --text: #e6ebf2;
  --text-dim: #9aa5b1;
  --text-mute: #6b7686;

  /* 경계/구분 */
  --border: #263248;
  --border-soft: #1e2838;

  /* 강조 (플레이어 브랜드는 인라인 스타일로 별도) */
  --accent: #4f8cff;
  --focus: #7aa2ff;

  /* 상태 색 (텍스트 라벨과 항상 병행) */
  --profit: #3fb27f;
  --low: #f0a500;
  --loss: #e5484d;
  --neutral: #64748b;

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* 반경 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* 그림자 */
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);

  --topbar-h: 58px;
  --status-h: 116px;
  --sidebar-w: 210px;
  --info-w: 340px;
}

/* 라이트 테마 (선호 시) — 데이터 대시보드 가독성 유지 */
:root[data-theme="light"] {
  --bg-app: #eef2f7;
  --bg-panel: #ffffff;
  --bg-panel-2: #f5f7fb;
  --bg-elev: #ffffff;
  --bg-input: #ffffff;
  --text: #1a2233;
  --text-dim: #4a5568;
  --text-mute: #718096;
  --border: #d7dee8;
  --border-soft: #e2e8f0;
}