/* ============================================================================
   Trà An Gia — Design tokens
   Values measured from the live site (see _recon/RECON.md). The source theme is
   Flatsome/WooCommerce on a 1170px container; these tokens reproduce it.
   ========================================================================= */

:root {
  /* ---- brand ------------------------------------------------------------ */
  --primary: #3b1f11;          /* nâu trà đậm — nav, footer, buttons, headings */
  --primary-rgb: 59, 31, 17;
  --accent: #d26e4b;           /* cam đất — hover, highlights */
  --price: #ff0000;            /* đỏ giá (measured from .product-small span.amount) */
  --sale: #7a9c59;             /* xanh "còn hàng" */

  /* ---- header gradient (measured: #FEB041 -> #F7DDC5) ------------------- */
  --header-from: #feb041;
  --header-to: #f7ddc5;
  /* Measured: `linear-gradient(#feb041, #f7ddc5)` — top to bottom, no angle. */
  --header-grad: linear-gradient(var(--header-from), var(--header-to));
  --cat-trigger-bg: #b87c2e;   /* measured on the source category trigger */

  /* ---- neutrals --------------------------------------------------------- */
  --ink: #0a0a0a;
  --ink-2: #2f2f2f;
  --ink-3: #666;
  --muted: rgba(102, 102, 102, 0.7);
  --line: #ececec;
  --line-2: #d5d5d5;
  --surface: #fff;
  --surface-2: #f4f4f4;
  --surface-3: #f1f1f1;
  --footer-ink: rgba(255, 255, 255, 0.5);
  --copyright-bg: #0a0a0a;

  /* ---- layout ----------------------------------------------------------- */
  --container: 1140px;   /* measured: source hero row is 1140 wide */
  --gutter: 15px;
  --header-h: 144px;           /* masthead 100 + nav 44 */
  --masthead-h: 100px;
  --nav-h: 44px;
  --sidebar-w: 264px;
  --radius: 6px;

  /* ---- type ------------------------------------------------------------- */
  --font: Exo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script: "Dancing Script", cursive;
  --fs-base: 16px;
  --lh-base: 1.6;
  --fs-nav: 12.8px;
  --fs-product: 14.4px;
  --fs-btn: 11.52px;
  --fs-small: 13.5px;

  /* ---- elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .18);

  /* ---- motion ----------------------------------------------------------- */
  --t-fast: .15s ease;
  --t: .25s ease;
  --t-slow: .4s cubic-bezier(.2, .7, .3, 1);
}