/* GENERATED — 직접 수정 금지. 원천: tokens/tokens.css */
/* ====================================================================
 * QQ Market Board Design System — Design Tokens (CSS Custom Properties)
 * --------------------------------------------------------------------
 * ✍️ SOURCE(원천 디자인 코드) — 이 파일을 손으로 고친다. 고친 뒤 재빌드:
 *    python .claude/skills/design-asset-library/scripts/build-tokens.py --system qq-market --install
 * 단일 출처(SSOT): 모든 컴포넌트/템플릿/소비 프로젝트는 이 변수만 참조.
 *    파생물(tokens.json·dist/*·소비처 사본)은 생성물 — 손대지 말 것. v1.0
 * ==================================================================== */

:root {
  /* Brand (QQ) */
  --qq-gold: #e8b923;
  --qq-gold-dim: #b8901a;
  /* 시세 방향색 (한국식: 상승=빨강 / 하락=파랑) */
  --up: #f6465d;
  --up-soft: rgba(246, 70, 93, 0.12);
  --down: #4d9fff;
  --down-soft: rgba(77, 159, 255, 0.12);
  --flat: #9aa4b2;
  /* 신호 배지 */
  --sig-warning: #f6465d;  /* 유의종목 */
  --sig-caution: #e8b923;  /* 주의 계열 */
  --sig-new: #16c784;  /* 신규 */
  /* 서체 */
  --ff: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-num: "SF Mono", "Roboto Mono", "Consolas", ui-monospace, monospace;
  /* 타입 스케일 (1.25 modular) */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  /* Spacing (8pt 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;
  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);
  /* Layout 치수 */
  --gnb-h: 56px;
  --lnb-w: 240px;
  --bottom-nav-h: 58px;
}

/* ---------- 다크 (기본) ---------- */
:root, :root[data-theme="dark"] {
  /* surface */
  --bg: #0b0e11;
  --bg-elev: #161a1e;
  --surface: #1e2329;
  --surface-2: #262b31;
  --border: #2b3139;
  --border-soft: #21262c;
  --text: #eaecef;
  --text-2: #b7bdc6;
  --text-3: #909aa8;  /* a11y 보정: #848e9c→#909aa8 (surface-2 위 4.30→5.01:1, 모든 표면 본문 4.5:1↑) */
  --hover: rgba(255,255,255,.04);
  --row-hover: rgba(255,255,255,.05);
}

/* ---------- 라이트 ---------- */
:root[data-theme="light"] {
  /* surface */
  --bg: #f5f6f8;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e3e6ea;
  --border-soft: #eef0f3;
  --text: #14181f;
  --text-2: #444c57;
  --text-3: #626b75;  /* a11y 보정: #707a86→#626b75 (bg 위 4.03→5.01:1, surface-2 4.83:1) */
  --hover: rgba(0,0,0,.03);
  --row-hover: rgba(0,0,0,.035);
  /* direction */
  --up: #cf233c;  /* a11y 보정(라이트 전용): #f6465d는 흰 배경 위 3.53:1 → #cf233c (bg 4.91, bg-elev 5.30:1). 한국식 빨강 유지 */
  --up-soft: rgba(207, 35, 60, 0.09);
  --down: #2266dc;
  --down-soft: rgba(38, 110, 220, 0.08);
  /* elevation */
  --shadow-1: 0 1px 2px rgba(20,24,31,.08);
  --shadow-2: 0 10px 30px rgba(20,24,31,.10);
}