/* ==========================================================================
   ZepLink Design System — 디자인 토큰
   --------------------------------------------------------------------------
   Client-iOS(`Support/Color+Hex.swift`)와 Figma "Design System — Zeplink v2"
   에서 그대로 옮겨온 값이다. 두 곳이 다르면 코드베이스가 정본이다.
   값을 바꿀 일이 생기면 여기가 아니라 iOS 쪽을 먼저 고치고 동기화할 것.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 브랜드 ---- */
  --brand-primary: #5c7ef1;
  --brand-primary-grad-from: #5c7df2;
  --brand-primary-grad-to: #8059ed;
  /* LinearGradient.brand — 기본 버튼 · FAB · 배지 */
  --brand-gradient: linear-gradient(90deg, var(--brand-primary-grad-from), var(--brand-primary-grad-to));
  /* 워드마크용 대각선 변형 */
  --brand-gradient-diagonal: linear-gradient(135deg, var(--brand-primary-grad-from), var(--brand-primary-grad-to));
  /* 로그인 · 온보딩 배경 (하늘 워시) */
  --brand-bg-top: #f4f9fe;
  --brand-bg-bottom: #bcd4ff;
  --gradient-login-bg: linear-gradient(180deg, var(--brand-bg-top), var(--brand-bg-bottom));

  --brand-primary-tint: #e5eafe;    /* 진한 틴트 — 칩, 보조 버튼 */
  --brand-primary-surface: #eef1fe; /* 연한 틴트 — 아이콘 타일, 콜아웃 */
  --brand-primary-border: rgba(92, 126, 241, 0.14);

  /* ---- 시맨틱 ---- */
  --success: #2eb85c;
  --warning: #f5a623;
  --error: #e5484d;
  --info: #5c7ef1;

  --success-surface: #e9f7ee;
  --success-text: #1f7a43;
  --warning-surface: #fef4e5;
  --warning-text: #b26a00;
  --error-surface: #fdecec;
  --error-text: #c22e33;
  --info-surface: var(--brand-primary-surface);
  --info-text: #3b4a82;

  /* ---- 호스트 상태 필 (점 없는 3단계 캡슐 — 색으로만 상태를 말한다) ---- */
  --status-online-surface: #e4f7ea;
  --status-online-text: #1f9e4d;
  --status-away-surface: #fff2de;
  --status-away-text: #b26a00;
  --status-stale-surface: #fee2e2;
  --status-stale-text: #dc2626;

  /* ---- 뉴트럴 · 텍스트 ---- */
  --text-primary: #1c1f26;
  --text-secondary: #737585;
  --text-muted: #8c8f9e;
  --text-disabled: #b8bac7;

  /* ---- 뉴트럴 · 표면과 선 ---- */
  --surface: #ffffff;
  --background: #f2f2f7;
  --canvas: #e9ecf2;
  --fill-track: #f2f2f7;
  --border: #e0e3eb;
  --border-subtle: #eceef3;
  --border-input: #d9dbe5;
  --divider: #f0f1f5;
  --chevron: #c6c9d4;
  --avatar-surface: #d1d3db;

  /* ---- 몰입 화면 ---- */
  --scanner-bg: #101219;
  --stream-bg: #0b0d12;

  /* 그림자 틴트 — 네이비(#1A1F4D)를 낮은 알파로 */
  --shadow-tint: 26, 31, 77;

  /* ---- 타이포그래피 ---- */
  --font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;

  /* ---- 여백 (4pt 그리드) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- 라운드 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-button: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- 그림자 ---- */
  --elevation-0: inset 0 0 0 1px var(--border-subtle);
  --elevation-1: 0 2px 8px 0 rgba(var(--shadow-tint), 0.06);
  --elevation-2: 0 4px 16px 0 rgba(var(--shadow-tint), 0.1);
  --elevation-3: 0 8px 28px 0 rgba(var(--shadow-tint), 0.16);
  --shadow-card: 0 4px 16px 0 rgba(var(--shadow-tint), 0.08);
  --shadow-panel: inset 0 0 0 1px var(--border-subtle), 0 6px 24px 0 rgba(var(--shadow-tint), 0.06);
  --shadow-button: 0 4px 12px 0 rgba(var(--shadow-tint), 0.22);
  --shadow-dialog: inset 0 0 0 1px var(--border-subtle), 0 10px 32px 0 rgba(var(--shadow-tint), 0.16);

  /* ---- 링크 ---- */
  --link: var(--brand-primary);
  --link-hover: #4a6bdc;
}