/* ════════════════════════════════════════════════════════════
   VerfiX — Color tokens
   The brand runs on exactly three colors: VerfiX Red, Ink Navy,
   and White. Everything else is a neutral gray step or a muted
   status accent reserved for state (never decoration).
════════════════════════════════════════════════════════════ */
:root{
  /* ── Brand: VerfiX Red ───────────────────────────── */
  --vx-red:        #C8252A;   /* primary brand red — CTAs, accents, icons */
  --vx-red-dark:   #A01E22;   /* hover / pressed red */
  --vx-red-bg:     #FDF2F2;   /* tinted red surface (icon chips, soft cards) */
  --vx-red-line:   #F5CECE;   /* border on red-tinted surfaces */

  /* ── Brand: Ink Navy ─────────────────────────────── */
  --vx-navy:       #1A1F2E;   /* primary ink + dark sections */
  --vx-navy-2:     #252B3D;   /* raised navy (hover on dark) */
  --vx-navy-3:     #0F1420;   /* deepest navy */

  /* ── Text ────────────────────────────────────────── */
  --vx-text:       #1A1F2E;   /* headings + primary body */
  --vx-muted:      #4B5563;   /* secondary body */
  --vx-light:      #6B7280;   /* captions, meta, placeholders — AA on white (4.8:1) */
  --vx-xlight:     #D1D5DB;   /* disabled text */

  /* ── Surfaces & borders ──────────────────────────── */
  --vx-bg:         #FFFFFF;   /* page */
  --vx-off:        #F7F8FA;   /* off-white panel / striped rows */
  --vx-border:     #E5E7EB;   /* hairline borders, dividers */
  --vx-border-2:   #D1D5DB;   /* stronger borders, inputs */

  /* ── Status (use only to signal state) ───────────── */
  --vx-success:    #16A34A;   --vx-success-bg:#D1FAE5;  --vx-success-fg:#065F46;
  --vx-warn:       #D97706;   --vx-warn-bg:   #FEF3C7;  --vx-warn-fg:   #92400E;
  --vx-danger:     #C8252A;   --vx-danger-bg: #FEE2E2;  --vx-danger-fg: #991B1B;
  --vx-info:       #2563EB;   --vx-info-bg:   #DBEAFE;  --vx-info-fg:   #1E40AF;

  /* ── Decision outcomes (Trust Engine) ────────────── */
  --vx-approve:    #16A34A;
  --vx-review:     #D97706;
  --vx-reject:     #C8252A;

  /* ── Semantic aliases ────────────────────────────── */
  --surface-page:    var(--vx-bg);
  --surface-panel:   var(--vx-off);
  --surface-card:    var(--vx-bg);
  --surface-dark:    var(--vx-navy);
  --surface-tint:    var(--vx-red-bg);
  --text-heading:    var(--vx-text);
  --text-body:       var(--vx-muted);
  --text-caption:    var(--vx-light);
  --accent:          var(--vx-red);
  --accent-hover:    var(--vx-red-dark);
  --border-hairline: var(--vx-border);
  --focus-ring:      var(--vx-red);
}