/* ============================================================
   ENgage — Design system
   Màu và font lấy trực tiếp từ bản thiết kế Figma "Christian Dating App"
   ============================================================ */
:root {
  /* --- Màu thương hiệu (đúng mã trong Figma) --- */
  --c-blue:      #2A4EE0;   /* xanh chủ đạo: nút chính, nhãn */
  --c-blue-ink:  #1E3BB8;   /* xanh đậm hơn khi nhấn */
  --c-deep:      #0F1F8C;   /* navy: nền onboarding, header */
  --c-deep-2:    #0B1770;   /* navy tối hơn cho chuyển sắc */
  --c-marigold:  #F8BE2C;   /* vàng: nút hành động chính */
  --c-marigold-d:#E8A800;
  --c-paper:     #F1EDE3;   /* kem: khung trích dẫn, ghi chú */
  --c-bg:        #F4F5FC;   /* nền ứng dụng */
  --c-coral:     #F0533F;   /* tim / thích */
  --c-ink:       #15171F;   /* chữ chính */
  --c-icon:      #8FA3C4;   /* icon chưa chọn */

  /* --- Sắc độ phụ trợ --- */
  --c-white:     #FFFFFF;
  --c-line:      #DDE0EE;
  --c-line-soft: #E8EAF4;
  --c-fill:      #F0F2FA;
  --c-fill-2:    #E8EAF4;
  --c-muted:     #7A7A88;
  --c-muted-2:   #B0B0C0;
  --c-amber-ink: #7A5E00;   /* chữ trên nền vàng nhạt */
  --c-amber-bg:  #FFFBF0;
  --c-amber-line:#FFE9B0;
  --c-green:     #059669;
  --c-green-bg:  #DCFCE7;
  --c-red-bg:    #FEE2E2;

  /* --- Chữ --- */
  --f-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-body:    'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Bo góc --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Đổ bóng --- */
  --sh-sm: 0 1px 2px rgba(15, 31, 140, .06);
  --sh-md: 0 4px 16px rgba(15, 31, 140, .08);
  --sh-lg: 0 12px 34px rgba(15, 31, 140, .14);
  --sh-up: 0 -6px 24px rgba(15, 31, 140, .10);

  /* --- Khoảng cách & an toàn màn hình --- */
  --gutter: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 62px;
}

/* Chữ nhãn kiểu chữ hoa cách xa — dùng khắp app (VD "BƯỚC 1 / 8") */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow--light { color: rgba(255, 255, 255, .66); }

/* Câu Kinh Thánh: serif nghiêng */
.scripture {
  font-family: var(--f-serif);
  font-style: italic;
  line-height: 1.45;
}

/* Tiêu đề lớn */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
}

/* ------------------------------------------------------------------
   QUAN TRỌNG — chữ tiếng Việt
   Figtree, DM Mono và Instrument Serif (lấy từ Figma) chỉ có bộ "latin" và
   "latin-ext": chúng KHÔNG có các chữ có dấu của tiếng Việt (ế, ộ, ằ, ữ…).
   Nếu để nguyên, trình duyệt phải mượn chữ từ phông khác cho từng ký tự và
   chữ tiếng Việt trông vỡ, cao thấp không đều.
   Vì vậy khi giao diện đang ở tiếng Việt ta đổi sang bộ chữ có đủ dấu mà vẫn
   giữ đúng phong cách. Bricolage Grotesque (tiêu đề) đã có sẵn tiếng Việt.
   ------------------------------------------------------------------ */
html[lang="vi"] {
  --f-body: 'Be Vietnam Pro', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Roboto Mono', 'DM Mono', ui-monospace, Menlo, monospace;
}
html[lang="vi"] .scripture { font-family: 'Lora', Georgia, 'Times New Roman', serif; }