/* RTP Design System — CSS Variables (frontspec.md §10)
 *
 * LEGACY — 표준 토큰은 tokens.css 의 --bb-* 다. (docs/conventions/frontend.md "Design Tokens" 참고)
 * 값이 --bb-* 와 동일한 토큰은 var(--bb-*) 별칭으로 연결해 단일 소스로 수렴시킨다.
 *   ⚠️ 반드시 tokens.css 가 먼저 로드돼야 별칭이 해석됨 (_rtp_base.html 순서 준수).
 * 값이 다르거나 --bb-* 에 대응이 없는 토큰만 literal 로 유지 (기존 rtp-* 페이지 회귀 방지).
 */
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800&family=Barlow:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand — 정본 정렬 후 primary=orange 이므로 --bb-primary 로 재배선 (값 #FF6B35 그대로 보존) */
  --rtp-orange: var(--bb-primary);       /* #FF6B35 (기존 --bb-accent → --bb-primary) */
  --rtp-orange-soft: var(--bb-primary-soft);
  --rtp-ink: var(--bb-ink);              /* #191F28 */
  --rtp-line: var(--bb-border);          /* #E5E8EB */
  --rtp-line-soft: var(--bb-border-soft);
  --rtp-white: var(--bb-bg);             /* #FFFFFF */
  --rtp-hero-dark: var(--bb-hero-dark);
  --rtp-hero-inner: var(--bb-hero-inner);

  /* Brand — bb 에 대응 없음 → literal 유지 */
  --rtp-ink-2: #4e5968;
  --rtp-ink-3: #8b95a1;
  --rtp-ink-4: #b0b8c1;
  --rtp-bg: #f1f3f5;                      /* ≠ --bb-surface(#F9FAFB) → 유지 */

  /* Data viz — blue is charts only. 정본 정렬 후 accent=blue → --bb-accent 로 재배선 */
  --rtp-blue: var(--bb-accent);          /* 정본 #0064FF (기존 #3182F6 에서 통일) */
  --rtp-blue-soft: var(--bb-accent-soft);
  --rtp-blue-ink: var(--bb-accent-dark);

  /* State */
  --rtp-error: var(--bb-danger);          /* 정본 정렬로 --bb-danger=#FF4242 → 별칭 수렴 */
  --rtp-win: var(--bb-primary);           /* #FF6B35 (승리=오렌지, --bb-primary 로 재배선) */
  --rtp-loss: #8b95a1;                    /* bb 대응 없음 → 유지 */

  /* Type */
  --rtp-font-ko: 'Pretendard', system-ui, sans-serif;   /* ≠ --bb-font (families 다름) → 유지 */
  --rtp-font-num: var(--bb-font-num);

  /* Radius — 값 동일한 것만 별칭, 나머지는 스케일이 달라 유지 */
  --rtp-radius-sm: var(--bb-radius-sm);   /* 6px */
  --rtp-radius-md: 10px;                   /* bb 대응 없음 */
  --rtp-radius-lg: 12px;                   /* ≠ --bb-radius-lg(14px), 이름 충돌 → 유지 */
  --rtp-radius-xl: 14px;
  --rtp-radius-2xl: 18px;
  --rtp-radius-3xl: 20px;
  --rtp-radius-pill: var(--bb-radius-pill); /* 999px */

  /* Shadow — bb 와 값 동일 → 별칭 */
  --rtp-shadow-card: var(--bb-shadow);
  --rtp-shadow-modal: var(--bb-shadow-lg);
  --rtp-shadow-cta: var(--bb-shadow-md);

  /* Motion — bb 와 값 동일 → 별칭 */
  --rtp-ease-out: var(--bb-ease);
  --rtp-t-fast: var(--bb-t-fast);
  --rtp-t-base: var(--bb-t-base);
  --rtp-t-slow: var(--bb-t-slow);

  /* CTA Hero — bb 대응 없음 → 유지 */
  --rtp-cta-hero-start:  #d94e1f;
  --rtp-cta-hero-end:    #b8401a;
  --rtp-cta-hero-shadow: rgba(184,64,26,.35);
}