/* ==========================================================================
   WEB366 PET — tokens.css
   Biến thiết kế (màu, chữ, khoảng cách) — ported nguyên từ html.zip.
   Màu accent/hot có thể ghi đè ở Giao diện > WEB366 PET Options.
   ========================================================================== */
.web366-ux7k2p {
  /* màu */
  --web366-paper: #f3f2f2;
  --web366-surface: #eae9e9;
  --web366-ink: #201e1d;
  --web366-ink-60: #605d5d;
  --web366-ink-45: #7d7979;
  --web366-line: #d7d3d3;
  --web366-accent: #0088b0;
  --web366-accent-100: #e9f8ff;
  --web366-accent-200: #cbeeff;
  --web366-accent-600: #1186ac;
  --web366-accent-700: #006786;
  --web366-accent-800: #004961;
  --web366-hot: #d6006c;
  --web366-hot-100: #fff1f4;
  --web366-hot-700: #aa0b56;

  /* type */
  --web366-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --web366-fw-head: 600;

  /* spacing */
  --web366-s1: 5px;
  --web366-s2: 10px;
  --web366-s3: 15px;
  --web366-s4: 20px;
  --web366-s6: 30px;
  --web366-s8: 40px;
  --web366-s12: 60px;
  --web366-s16: 80px;
  --web366-s20: 100px;

  --web366-radius: 2px;
  --web366-radius-lg: 4px;
  --web366-shadow-sm: 0 1px 2px rgba(45, 43, 43, .14);
  --web366-shadow-md: 0 3px 10px rgba(45, 43, 43, .16);
  --web366-shadow-lg: 0 12px 32px rgba(45, 43, 43, .22);

  --web366-header-h: 68px;
  --web366-max: 1280px;

  /* bổ sung: html gốc dùng nhưng chưa khai báo */
  --web366-s5: 25px;
  --web366-s10: 50px;
  --web366-accent-300: #99e0ff;
  --web366-accent-400: #62c5ee;

  /* màu trên nền tối (footer, drawer, CTA, coupon) */
  --web366-white: #fff;
  --web366-ink-900: #1b1918;
  --web366-on-dark: #f1eeed;
  --web366-on-dark-90: #efeceb;
  --web366-on-dark-80: #e6e2e0;
  --web366-on-dark-70: #cfcac8;
  --web366-on-dark-60: #b3adab;
  --web366-on-dark-55: #a8a2a0;
  --web366-on-dark-45: #8e8886;
}