/* onsaede 디자인 토큰 — STEP_04 4-A.
 * 색: 네이비 #1E3A5F 주색 + 흰 배경. 그린 모방 금지(우리 브랜드).
 * 폰트: Pretendard (로컬 woff2 + CDN 폴백, @font-face는 base.html에서 로드).
 * 그리드: 8px. 본문 14px.
 */
:root {
  /* ── color ─────────────────────────────────────────────── */
  --navy:        #1E3A5F;   /* 주색 */
  --navy-700:    #2D4D7A;   /* hover/active */
  --navy-500:    #4A6A95;   /* 보조 */
  --navy-300:    #8FA5C3;   /* 약한 강조 */
  --bg:          #FFFFFF;
  --gray-50:     #F9FAFB;
  --gray-100:    #F3F4F6;
  --gray-300:    #D1D5DB;
  --gray-500:    #6B7280;
  --gray-700:    #374151;
  --danger:      #DC2626;
  --danger-bg:   #FEF2F2;
  --success:     #16A34A;
  --success-bg:  #F0FDF4;
  --info:        #2563EB;
  --info-bg:     #EFF6FF;

  /* ── typography ────────────────────────────────────────── */
  --font-sans:   'Pretendard', 'Noto Sans KR', -apple-system, "Apple SD Gothic Neo",
                 "Malgun Gothic", system-ui, sans-serif;
  --text-12:     12px;   /* 캡션 */
  --text-14:     14px;   /* 본문 */
  --text-16:     16px;   /* 소제목 */
  --text-20:     20px;   /* 제목 */
  --text-24:     24px;   /* 큰 제목 */
  --w-400:       400;
  --w-600:       600;
  --w-700:       700;
  --lh-1-3:      1.3;
  --lh-1-5:      1.5;
  --lh-1-7:      1.7;

  /* ── radius / shadow ─────────────────────────────────── */
  --r-4:         4px;
  --r-8:         8px;
  --r-12:        12px;
  --sh-soft:     0 1px 3px rgba(0, 0, 0, 0.08);
  --sh-card:     0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-modal:    0 4px 12px rgba(0, 0, 0, 0.10);

  /* ── spacing (8px grid) ───────────────────────────────── */
  --sp-4:        4px;
  --sp-8:        8px;
  --sp-12:       12px;
  --sp-16:       16px;
  --sp-24:       24px;
  --sp-32:       32px;
  --sp-40:       40px;
  --sp-48:       48px;
  --sp-64:       64px;

  /* ── component sizes ─────────────────────────────────── */
  --h-btn-40:    40px;
  --h-btn-48:    48px;
  --h-input:     44px;
}