/*
 * Global design tokens.
 *
 * Loaded first in the global folder (base.css precedes others by enqueue sort),
 * so variables defined here cascade to every component bundle.
 *
 * Container tokens follow the Bootstrap container idea: one max-width + one
 * horizontal padding, overridden responsively on :root so all component inners
 * flip breakpoint-by-breakpoint from a single place.
 */

:root {
  --iw-container-max: 1488px;
  --iw-container-pad-x: 24px;

  /*
   * Theme tokens — T1 defaults.
   * Override per template under `body.tcdt-color-t{N}` in t{N}/base.css.
   * Body class is set in inc/fn-setup-body-class.php from
   * Customizer setting `iw_color_scheme` (which defaults to follow
   * `hf_template_variant`, but can be set independently — editor can
   * pair H/F T1 with color scheme T3 for a campaign, etc.).
   *
   * Naming:
   *   --iw-accent*   primary accent (link, active state, TOC border, nav underline)
   *   --iw-price     price text (often tách khỏi accent)
   *   --iw-cta-*     CTA button (often tách khỏi accent)
   *   --iw-banner-*  hero/banner gradient
   *   --iw-text-*    neutral text (KHÔNG template-specific, consolidate only)
   *   --iw-border*   neutral borders
   *   --iw-bg-*      neutral surfaces
   */

  /* accent */
  --iw-accent:        #4564ed;
  --iw-accent-strong: #3a52c4;
  --iw-accent-soft:   #f5f7ff;
  --iw-accent-fg:     #ffffff;
  --iw-link:          var(--iw-accent);
  --iw-link-hover:    var(--iw-accent-strong);

  /* pricing — CỐ TÌNH KHÔNG định nghĩa --iw-price ở :root.
     Lý do (giống --iw-cta-grad bên dưới): `--iw-price: var(--iw-accent)` đặt ở
     :root sẽ bị resolve cứng = accent default (#4564ed) ngay tại :root rồi inherit
     xuống — `body.tcdt-color-tN` override --iw-accent KHÔNG cập nhật lại được nữa
     → giá sai màu, không đổi theo scheme.
     Thay vào đó consumer fallback `var(--iw-price, var(--iw-accent))`, nên:
       - T1/T5 (không set --iw-price) → giá bám accent, đổi theo scheme.
       - T2/T3/T4 muốn tách giá khỏi accent thì set --iw-price thẳng trong t{N}/base.css. */

  /* CTA — default = accent (blue) cho T1 + T5. Templates khác override. */
  --iw-cta-bg:       #4564ed;
  --iw-cta-fg:       #ffffff;
  --iw-cta-bg-hover: #3a52c4;
  --iw-cta-border:   var(--iw-cta-bg);
  /* CTA gradient (nút card v3/v4): CỐ TÌNH KHÔNG định nghĩa ở :root.
     Lý do: `--iw-cta-grad-from: var(--iw-accent)` đặt ở :root sẽ bị tính cứng
     ngay tại :root (= accent default), rồi inherit xuống — `body.tcdt-color-tN`
     override --iw-accent KHÔNG cập nhật lại được nữa → nút sai màu.
     Thay vào đó consumer fallback `var(--iw-cta-grad-from, var(--iw-accent))`,
     nên template mới chỉ cần set --iw-accent là nút tự đúng màu. Template muốn
     gradient KHÁC accent (vd T3 cam sáng, T4 xanh Figma) thì tự khai báo
     --iw-cta-grad-from/to trong block body.tcdt-color-tN của nó. */

  /* banner gradient */
  --iw-banner-grad-from: #0593eb;
  --iw-banner-grad-to:   #1057cb;

  /* neutrals (template-agnostic) */
  --iw-text-primary:   #3d3d3d;
  --iw-text-secondary: #777777;
  --iw-text-muted:     #888888;
  --iw-border:         #d1d1d1;
  --iw-border-soft:    #e7e7e7;
  --iw-bg-page:        #ffffff;
  --iw-bg-soft:        #f7f7f8;
}

@media (max-width: 991px) {
  :root {
    --iw-container-pad-x: 16px;
  }
}

/*
 * Site-wide reset of Flatsome's .page-wrapper padding for IW pages.
 * Body class `tcdt-page-template` is added in inc/fn-setup-body-class.php.
 * Lives in global/ (not t{N}/base.css) so mixed-template pages don't conflict.
 */
body.tcdt-page-template .page-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}