/* ============================================================
   Permeable Botanical UI — Design Tokens
   Website Tường Cây SG (tuongcaysg.com)

   Nguồn chân lý cho màu / bo góc / bóng / chuyển động / focus.
   demo/index.html nạp file này qua <link rel="stylesheet" href="../tokens.css">.
   Theme dùng các biến này thay vì hardcode giá trị.
   Xem DESIGN_DECISION.md để hiểu hướng thiết kế.
   ============================================================ */

:root {
  /* --- Màu: hệ Forest / rain-teal / cloud --- */
  --root-ink: #10251d;    /* chữ chính, nền đậm nhất */
  --canopy: #153f2d;      /* xanh rừng — dark band, package featured */
  --leaf: #3e7256;        /* xanh lá trung gian */
  --rain-teal: #0d6b66;   /* ACCENT chính — CTA, kicker, label, focus */
  --sage-glass: #a8b79d;  /* xanh xám nhạt — mảng kính mờ */
  --cloud: #f7f8f1;       /* nền sáng chủ đạo */
  --mist: #ecefe7;        /* nền phụ / placeholder ảnh */
  --wet-stone: #707b74;   /* chữ phụ / muted text */
  --clay: #b86b4f;        /* accent đất (dự phòng, dùng tiết chế) */
  --white: #ffffff;
  --line: rgba(16, 37, 29, 0.14); /* đường kẻ mảnh giữa các mảng */

  /* --- Bo góc --- */
  --radius: 18px;         /* bo góc chuẩn cho card/panel */
  --radius-sm: 14px;      /* bo góc nhỏ (swatch, input, spec) */
  --radius-pill: 999px;   /* nút bo tròn, kicker, nav */

  /* --- Bề rộng khung nội dung --- */
  --container: 1240px;

  /* --- Bóng đổ --- */
  --shadow-1: 0 18px 60px rgba(16, 37, 29, 0.10); /* nav, card nổi nhẹ */
  --shadow-2: 0 30px 80px rgba(16, 37, 29, 0.18); /* card khi hover / nổi mạnh */

  /* --- Chuyển động --- */
  --dur: 200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Focus (accessibility / WCAG) --- */
  --focus-ring: 3px solid var(--rain-teal);
  --focus-offset: 2px;
}