/* ===========================================================================
   VCPC — Unified design tokens (single source of truth for brand)
   PROBLEM this fixes: the marketing pages use Inter + navy #061A2F, while the
   app/* and product pages use Montserrat + navy #071f3d. That reads as two
   different products. Adopt ONE set everywhere.

   HOW TO USE
   1. Include this file FIRST on every page (before vcpc.css / inline styles):
        <link rel="stylesheet" href="/assets/tokens.css"/>
   2. In each page, replace hard-coded colors/fonts with the variables below,
      OR (fast path) keep existing CSS but override the two roots so both
      systems resolve to the same values. The :root block already does that.
   3. Pick ONE font. Default below = Inter (marketing). If you prefer Montserrat
      for the whole brand, swap --font-sans and load Montserrat globally.
   =========================================================================== */
:root{
  /* Brand navy — pick ONE. We standardise on the marketing navy. */
  --vcpc-navy:    #061A2F;
  --vcpc-navy-2:  #0A2747;
  --vcpc-navy-3:  #102F52;
  --vcpc-gold:    #FFB000;
  --vcpc-gold-2:  #FFC64A;
  --vcpc-cream:   #FBF8EF;
  --vcpc-light:   #F5F7FA;
  --vcpc-line:    #E5E8EF;
  --vcpc-text:    #1B2A3F;
  --vcpc-muted:   #667085;
  --vcpc-good:    #0D8A5D;
  --vcpc-warn:    #B8860B;
  --vcpc-bad:     #C0392B;

  --vcpc-radius:  18px;
  --vcpc-radius-lg: 28px;
  --vcpc-shadow:  0 24px 70px rgba(6,26,47,.12);
  --vcpc-ease:    cubic-bezier(.2,.8,.2,1);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Back-compat aliases so existing files keep working unchanged --- */
  --navy:#061A2F; --navy2:#0A2747; --navy3:#102F52; --gold:#FFB000; --gold2:#FFC64A;
}

/* Map the APP palette (#071f3d family used in app-core.css / inline styles)
   onto the unified navy so the two systems converge without a full rewrite. */
.app, .app * { --app-navy:#061A2F; }

/* Optional global font unification — uncomment to force one typeface site-wide.
   body, .app { font-family: var(--font-sans) !important; } */

/* Confidence-label chips — reuse the v2 three-tier labels consistently. */
.vcpc-label{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:999px;text-transform:uppercase}
.vcpc-label.fact{background:#E2EFE8;color:var(--vcpc-good)}
.vcpc-label.est{background:#FBEFD8;color:var(--vcpc-warn)}
.vcpc-label.hyp{background:#F6E4E2;color:var(--vcpc-bad)}

/* "Chờ chuyên gia VCPC ký duyệt" badge — used across dashboards/MI/recommendations. */
.vcpc-signoff{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--vcpc-navy);background:#FFF8E8;border:1px solid rgba(255,176,0,.4);border-radius:999px;padding:3px 10px}
.vcpc-signoff::before{content:"⏳"}
.vcpc-signoff.done{background:#E2EFE8;border-color:rgba(13,138,93,.4);color:var(--vcpc-good)}
.vcpc-signoff.done::before{content:"✓"}