/* theme.css — 디자인 토큰 전용. 현재 적용 스킨: midnight-gold (검정 + 금색)
 *
 * app.css 와 JS 는 var() 만 쓰고 raw hex 를 두지 않는다. 따라서 리스킨은
 * 이 파일의 값 교체로 끝난다.
 *
 * 다른 스킨으로 교체하려면 ../../../skins/<이름>.css 내용을 이 파일에 덮어쓰면 된다.
 * 보관중인 후보와 미리보기 도구: 프로젝트 루트의 skins/ 참고.
 */

:root {
  /* surface — 미묘한 온기가 도는 블랙 */
  --bg: #08080a;
  --panel: #131316;
  --panel-grad: linear-gradient(180deg, #17171b 0%, #121215 100%);
  /* 업로드 이미지가 정규화될 때 깔리는 캔버스색. 서버(imagefit.go cardCanvasColor)와
     반드시 같아야 썸네일 여백이 보이지 않는다. */
  --card-canvas: #0d0d11;
  --panel2: #1e1e23;
  --line: #2b2b31;
  --line-soft: #201f24;

  /* text */
  --text: #f4f1e9;
  --muted: #8d887e;
  --accent-on: #0d0b06;

  /* brand — 샴페인 골드 */
  --accent: #d9b45f;
  --accent-strong: #f0cd7d;
  --accent-soft: rgba(217, 180, 95, 0.13);
  --accent-line: rgba(217, 180, 95, 0.32);

  /* status */
  --success: #5fbf8b;
  --danger: #e0575f;
  --warn: #d9a441;
  --live: #e5484d;

  /* chat */
  --bubble-mine: linear-gradient(180deg, #d9b45f 0%, #c9a34f 100%);
  --bubble-mine-text: #0d0b06;
  --bubble-other: #1e1e23;
  --bubble-other-text: #ece8df;

  /* nav */
  --nav-bg: rgba(8, 8, 10, 0.92);
  --nav-active: var(--accent);

  /* shape */
  /* 로비 카드 색 시스템 — 유저가 처음 보는 화면 넉 장.
     예전에는 app.css 에 리터럴로 박혀 있어 어떤 테마를 만들어도 금색이었다.
     아래는 그때 값 그대로다(화면 무변화). */
  --lc-hi: #f2ce76;
  --lc-line: rgba(226, 184, 89, 0.43);
  --lc-glow: rgba(225, 181, 79, 0.15);
  --lc-deep: rgba(126, 85, 16, 0.30);
  --lc-base-from: #17171a;
  --lc-base-to: #0a0a0e;

  /* app.css 가 rgba() 로 알파를 섞어 쓰는 자리들. 배경·강조색의 RGB 삼원색. */
  --bg-rgb: 10, 10, 14;
  --accent-rgb: 217, 180, 95;
  --brand-wash-rgb: 191, 136, 28;

  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  /* 홈 로비 카드 전용. 다른 모서리와 값이 달라(19px) 별도 토큰으로 둔다 —
     첫 화면이 '모서리' 설정을 실제로 따르게 하는 자리다. */
  --radius-card: 19px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px rgba(217, 180, 95, 0.16);

  /* type */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", Roboto, sans-serif;

  /* telegram viewport insets — JS 가 실측값으로 덮어쓴다 */
  --tg-top-inset: 0px;
  --tg-safe-top: 0px;
  --tg-content-top: 0px;
  --tg-bottom-inset: 0px;
  --tg-left-inset: 0px;
  --tg-right-inset: 0px;
  --bottombar-h: 72px;
}