/* ═══════════════════════════════════════════════════════════
 * tokens.css — 우리의원 모바일 앱 디자인 토큰
 *
 * 색 팔레트 출처
 *   · 브랜드   #0d6fb8  — 홈페이지 woori-clinic.co.kr 의 --color-primary
 *   · 액센트   #2ba2ff  — 홈페이지 보조 액센트
 *   · 뉴트럴            — 은행 앱 계열의 저채도 그레이 스케일 (가독성 우선)
 *
 * ⚠️ 화면에서는 반드시 역할(role) 토큰을 씁니다.
 *    color: var(--fg)      ○
 *    color: var(--g900)    ✗
 * ═══════════════════════════════════════════════════════════ */

:root {
  /* ── 브랜드 ─────────────────────────────────────────────── */
  --brand-50:  #eaf3fa;
  --brand-100: #d3e6f5;
  --brand-200: #a8cdea;
  --brand-300: #6ba9d8;
  --brand-400: #2b86c6;
  --brand-500: #0d6fb8;   /* 메인 */
  --brand-600: #0b5c9b;   /* hover */
  --brand-700: #094a7d;   /* active */
  --accent:    #2ba2ff;   /* 링크·아이콘 강조 */

  /* ── 뉴트럴 ─────────────────────────────────────────────── */
  --g0:   #ffffff;
  --g50:  #f9fafb;
  --g100: #f2f4f6;
  --g150: #eaedf0;
  --g200: #e5e8eb;
  --g300: #d1d6db;
  --g400: #b0b8c1;
  --g500: #8b95a1;
  --g600: #6b7684;
  --g700: #4e5968;
  --g800: #333d4b;
  --g900: #191f28;

  /* ── 상태색 ─────────────────────────────────────────────── */
  --ok:      #00a862;
  --ok-bg:   #e7f7f0;
  --warn:    #f59f00;
  --warn-bg: #fff5e5;
  --danger:  #f04452;
  --danger-bg: #ffeef0;

  /* ── 역할 토큰 ───────────────────────────────────────────── */
  --fg:        var(--g900);   /* 본문 */
  --fg-2:      var(--g700);   /* 보조 */
  --fg-3:      var(--g500);   /* 약한 텍스트 */
  --fg-4:      var(--g400);   /* 플레이스홀더 */
  --fg-brand:  var(--brand-500);
  --fg-on:     #ffffff;       /* 강조 배경 위 글자 */

  --bg:        var(--g0);     /* 카드·시트 */
  --bg-canvas: #f6f9fd;       /* 화면 바탕 — 회색 대신 살짝 푸른 화이트. 흰 카드가 은은히 뜬다 */
  --bg-soft:   var(--g50);
  --bg-brand:      var(--brand-500);
  --bg-brand-weak: var(--brand-50);

  --line:        var(--g200);
  --line-subtle: var(--g150);
  --line-strong: var(--g300);
  /* 옅은 블루 라인 — 상단 구분선·카드 테두리에 살짝 브랜드 톤을 준다 */
  --line-blue:        #dce8f4;   /* 카드 테두리 (연하게) */
  --line-blue-strong: #cadef1;   /* 상단 구분선 (조금 더 또렷) */

  /* ── 타이포 ─────────────────────────────────────────────── */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
  --font-num: var(--font);

  /* ── 라운드 ─────────────────────────────────────────────── */
  --r-4:  4px;
  --r-6:  6px;
  --r-8:  8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-full: 999px;

  /* ── 그림자 ───────────────────────────────────────────────
   * 카드가 바탕에서 살짝 떠 보이게 하되, 티 나지 않을 만큼만.
   * 큰 그림자 대신 '얇게 두 겹'을 쓰면 요즘 앱 느낌이 난다. */
  --sh-1: 0 1px 3px rgba(25, 31, 40, .05), 0 1px 2px rgba(25, 31, 40, .03);
  --sh-2: 0 6px 18px rgba(25, 31, 40, .07), 0 2px 5px rgba(25, 31, 40, .04);
  --sh-3: 0 14px 36px rgba(25, 31, 40, .13), 0 4px 10px rgba(25, 31, 40, .06);
  /* 콘텐츠 카드용 — 바탕에서 은은히 떠 보이되 무겁지 않게 (레퍼런스 톤) */
  --sh-card: 0 4px 14px rgba(25, 31, 40, .06), 0 1px 3px rgba(25, 31, 40, .04);
  --sh-brand: 0 8px 20px rgba(13, 111, 184, .20);
  --sh-up: 0 -1px 0 var(--line-subtle);

  /* ── 레이아웃 ───────────────────────────────────────────── */
  --app-w: 430px;         /* 앱 화면 폭 (iPhone 15 Pro Max 기준) */
  --gutter: 20px;         /* 좌우 여백 */
  --appbar-h: 56px;
  --tabbar-h: 60px;

  /* ── 모션 (320ms 초과 금지) ──────────────────────────────── */
  --t-fast: 120ms cubic-bezier(.2, .8, .2, 1);
  --t-base: 200ms cubic-bezier(.2, .8, .2, 1);

  /* 안전영역 (노치·홈 인디케이터) */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
}