/**
 * TabTalk 디자인 토큰 — 색·모양의 단일 출처.
 *
 * 원칙: '같은 역할은 같은 색'. 화면마다 색을 직접 적지 말고 여기 토큰을 쓴다.
 * 화면 비율 기준 — 흰색·회색 80% / 기본 파랑 15% / 모드 보조색 5%.
 *
 * 기준색(파랑)은 기존 TabTalk 브랜드 파랑(#3182f6)을 그대로 쓴다.
 * 권장안(#2F7CF6)으로 갈아끼우지 않는다 — 브랜드 색은 유지가 우선이다.
 *
 * 모드 보조색(보라·민트)은 '집중 케어 / 사용량'을 구분하는 작은 배지·아이콘에만 쓴다.
 * 카드 배경·테두리·CTA에는 쓰지 않는다.
 *
 * 랜딩(index.html)에서 먼저 쓰고, 앱·블로그·가이드에서도 같은 파일을 불러 쓴다.
 */
:root {
  /* ── 표면 · 테두리 ── */
  --color-bg-page: #f7f9fb;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-hover: #b8d3ff;

  /* ── 글자 ──
     본문은 body(#667085) 이상으로. muted는 '덜 중요해도 되는' 문구 전용이며
     작은 글자에는 쓰지 않는다(연한 배경 위에서 4.5:1을 못 넘긴다). */
  --color-text-strong: #172033;
  --color-text-body: #667085;
  --color-text-muted: #98a2b3;

  /* ── 기본(브랜드 파랑) — 주요 행동·강조·링크·포커스 ──
     브랜드 파랑(#3182f6)에 흰 글자를 얹으면 대비가 3.71:1로 4.5:1에 못 미친다.
     그래서 '색' 자체는 브랜드 값을 그대로 두고, 흰 글자를 얹는 면(버튼 배경)만
     같은 계열 한 단계 진한 값(strong)을 쓴다. 강조 글자·아이콘·포커스 링은 primary. */
  --color-primary: #3182f6;
  --color-primary-strong: #1b64da; /* 흰 글자를 얹는 면 — 5.41:1 */
  --color-primary-hover: #1450b4;  /* 6.94:1 */
  --color-primary-active: #10409a; /* 8.59:1 */
  --color-primary-soft: #e8f3ff;
  --color-focus-ring: rgba(49, 130, 246, 0.28);

  /* ── 모드 보조색 — 배지·아이콘 전용 ── */
  --color-care: #5a3fce;
  --color-care-soft: #f0ebff;
  --color-usage: #0b7d6b;
  --color-usage-soft: #e6f7f2;

  /* ── 상태 ── */
  --color-danger: #d92d20;
  --color-disabled: #d0d5dd;

  /* ── 성공(success) — '집중 중' 등 잘 되고 있는 상태. 포인트는 밝은 초록, 글자는
     진한 초록으로(밝은 초록 글자는 흰 배경에서 대비가 낮다 — warn과 같은 이유). ── */
  --color-success: #00c73c;         /* 아이콘·점 등 비텍스트 포인트 전용 */
  --color-success-strong: #0d7a3d;  /* 흰/연배경 위 '집중 중' 글자 — AA 통과(5.4:1↑) */

  /* ── 주의(warn) — '딴짓'·카메라 개인정보 안내 등. 포인트는 밝은색, 글자는 진한색(대비 통과). ── */
  --color-warn: #ff8a3d;         /* 아이콘·진행바 등 비텍스트 포인트 전용 (텍스트로 쓰지 말 것) */
  --color-warn-strong: #b54708;  /* 흰/연배경 위 '주의' 글자 — AA 통과(5.2:1↑) */
  --color-warn-soft: #fff1e6;    /* 배지·칩 배경 */
  --color-warn-border: #f1e0ce;  /* 콜아웃 테두리 */

  /* ── 모양 ── */
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-card-hover: 0 4px 10px rgba(16, 24, 40, 0.07), 0 14px 28px rgba(16, 24, 40, 0.09);

  /* ── 버튼 공통 규격 ── */
  --btn-height: 44px;
  --btn-padding-x: 20px;
  --btn-font-size: 15px;
  --btn-font-weight: 600;
  --btn-icon-size: 18px;
  --btn-gap: 8px;
}