/* =========================================================
   KA BABY STUDIO — Design Tokens (nguồn chân lý duy nhất)
   Xem DESIGN-SYSTEM.md để biết quy tắc sử dụng.
   ========================================================= */
:root {
  /* ---- Paper / Neutral (chọn có chủ đích, ngả ấm) ---- */
  --paper:      #ffffff;
  --paper-2:    #faf8f5;
  --paper-3:    #f4efe9;

  --ink:        #2a2119;
  --ink-2:      #6b5e52;
  --ink-3:      #9a8c7e;

  --hairline:   #ece6de;
  --hairline-2: #e0d8cd;

  /* ---- Brand: Cam (từ logo) ---- */
  --orange:      #f27f1e;  /* mảng / nút / icon / hình lớn */
  --orange-600:  #da6a10;  /* hover mảng */
  --orange-text: #b45e12;  /* chữ nhỏ / link (đạt AA) */
  --orange-050:  #fdecd9;  /* nền tint */

  /* ---- Brand: Ô liu trầm (màu phụ) ---- */
  --olive:      #565a38;
  --olive-700:  #3f4229;
  --olive-050:  #eeefe6;

  /* ---- Semantic ---- */
  --bg:            var(--paper);
  --text:          var(--ink);
  --text-muted:    var(--ink-2);
  --border:        var(--hairline);
  --accent:        var(--orange);
  --accent-ink:    var(--orange-text);

  /* ---- Typography ---- */
  --font-sans:   "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Dancing Script", "Segoe Script", cursive;

  --text-body: 1.05rem;
  --leading:   1.7;

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

  /* ---- Elevation (tối giản: chỉ dùng khi hover) ---- */
  --shadow-hover: 0 12px 30px rgba(42, 33, 25, 0.10);
  --shadow-pop:   0 20px 46px rgba(42, 33, 25, 0.14);

  /* ---- Layout ---- */
  --maxw:     1200px;
  --gutter:   clamp(20px, 5vw, 44px);
  --header-h: 74px;
  --section-y: clamp(56px, 8vw, 104px);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  0.25s;
  --dur-slow:  0.65s;
}