/* ============================================================
   돌봄 · CareHub — Design Tokens
   기획서(02_UIUX_DESIGN_PLAN.md) 컬러/타이포 시스템 기반
   ============================================================ */

:root {
  /* ---- Brand / Primary ---- */
  --brand: #4F8DF7;          /* Primary Blue */
  --brand-strong: #3A77E0;
  --brand-soft: #EAF2FE;
  --brand-softer: #F4F8FF;

  /* ---- Category colors ---- */
  --c-child: #FFC233;        /* 아이 돌봄 (기획서 #FFD166 → 대비 보정) */
  --c-child-soft: #FFF6E0;
  --c-elder: #8E7CC3;        /* 어르신 돌봄 */
  --c-elder-soft: #F1EEF8;
  --c-pet: #FF9F43;          /* 펫 돌봄 */
  --c-pet-soft: #FFF1E3;
  --c-edu: #2FB99A;          /* 교육 (기획서 #43C59E → 대비 보정) */
  --c-edu-soft: #E4F6F1;

  /* ---- Semantic ---- */
  --danger: #FF5D5D;
  --danger-soft: #FFECEC;
  --success: #2BB673;
  --success-soft: #E4F6EE;
  --warning: #F5A623;
  --warning-soft: #FDF1DD;

  /* ---- Status (예약/요청 상태) ---- */
  --st-wait: #4F8DF7;        /* 대기 — 파랑 */
  --st-wait-bg: #EAF2FE;
  --st-progress: #2BB673;    /* 진행 — 초록 */
  --st-progress-bg: #E4F6EE;
  --st-cancel: #FF5D5D;      /* 취소 — 빨강 */
  --st-cancel-bg: #FFECEC;
  --st-dispute: #FF9F43;     /* 분쟁 — 주황 */
  --st-dispute-bg: #FFF1E3;
  --st-done: #8A93A3;        /* 완료 — 회색 */
  --st-done-bg: #EEF1F5;

  /* ---- Neutral / Ink ---- */
  --ink-900: #1A2230;
  --ink-800: #28303D;
  --ink-700: #3B4452;
  --ink-600: #555F6E;
  --ink-500: #6E7888;
  --ink-400: #98A1AF;
  --ink-300: #C2C9D4;
  --ink-200: #E2E7EE;
  --ink-100: #EFF2F6;
  --ink-50:  #F6F8FB;
  --white: #FFFFFF;

  /* ---- Surfaces ---- */
  --bg: #F4F6FA;             /* app background */
  --surface: #FFFFFF;
  --surface-2: #F6F8FB;
  --line: #E6EAF0;
  --line-strong: #D7DDE6;

  /* ---- Typography ---- */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-display: 28px;
  --fs-title: 24px;   /* 제목 */
  --fs-subtitle: 20px;/* 중제목 */
  --fs-lg: 17px;
  --fs-body: 15px;    /* 본문 */
  --fs-sm: 13px;      /* 설명 */
  --fs-xs: 11px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ---- Shadow ---- */
  --sh-xs: 0 1px 2px rgba(26,34,48,.06);
  --sh-sm: 0 2px 8px rgba(26,34,48,.06);
  --sh-md: 0 6px 20px rgba(26,34,48,.08);
  --sh-lg: 0 14px 40px rgba(26,34,48,.12);
  --sh-up: 0 -4px 16px rgba(26,34,48,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink-800);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--brand-soft); }

/* Pretendard webfont */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
}