/* look-vn-commerce.css — VN-fit COMMERCE look token-set (the variable layer).
   Overrides ONLY look tokens + picks density. Spine (base.css) unchanged.
   VN-fit dial: density HIGH, trust HIGH, promo HIGH, type = VN-diacritic-safe sans. */
:root {
  /* Palette — original (clone-of-none). VN-commerce: clean white + confident brand + hot promo accent */
  --color-bg:         #FFFFFF;
  --color-surface:    #F4F6F8;
  --color-surface-2:  #EEF1F4;
  --color-text:       #14181F;
  --color-text-muted: #5F666E;   /* was #6A7280: 4.85:1 white but only 4.48:1 on surface band (< AA 4.5). Darkened → 5.81 white / 5.37 surface / 5.13 surface-2, all clear 4.5:1 */
  --color-line:       #E4E8EC;
  --color-brand:      #0A7C5A;   /* trust green */
  --color-brand-ink:  #FFFFFF;
  --color-promo:      #CC2E1B;   /* hot promo red — sale/badges. Darkened from #E8402A (4.04:1, failed WCAG-AA) to 5.28:1 on white / 4.88:1 on surface; used as TEXT on price/.promo/.cnt/.it so it must clear 4.5:1 */
  --color-promo-ink:  #FFFFFF;
  --color-accent:     #1466D6;   /* link/info blue */

  /* VN typography — Be Vietnam Pro: built for Vietnamese diacritics */
  --font-head: "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  --lh-body: 1.55;               /* looser to clear tone marks */

  /* Density preset = TIGHT (VN packs more per screen) */
  --section-y: var(--section-y-tight);

  /* Shape */
  --radius: 6px;
  --radius-pill: 999px;
  --shadow-rest:  0 1px 3px rgba(20,24,31,.07);
  --shadow-hover: 0 8px 22px rgba(20,24,31,.14);
}